I just downloaded JQuery. For my first project, I'd like to make a table with sortable columns and alternating row colors.
For the sortable columns, I downloaded the Tablesorter plugin, then followed the tutorial at <a href="http://tablesorter.com/docs/">http://tablesorter.com/docs/</a><br clear="all">
I don't know a lot about JavaScript, but I have implemented and tweaked many pre-made JavaScripts. So I don't understand why I can't get this one to work.
First, I tried it on a PHP page with a table displaying dynamic content. When that didn't work, I made a very simple page, with nothing but a table, in the same directory as the two JavaScripts I linked to in the head section.
My table has head and body tags, along with the proper ID ("myTable"). Here's the entire code for the page:
* * * * *
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="jquery-1.2.6.min.js" type="text/javascript">
<script src="tablesorter/jquery.tablesorter.js" type="text/javascript">
<script src="tablesorter/jquery.tablesorter.min.js" type="text/javascript">
="JavaScript" type="text/JavaScript">
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</head>
<body>
BODY
<table width="100%" ID="myTable">
<thead>
<tr>
<th>N</th>
<th>Animal</th>
<th>Home</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>aardvark</td>
<td>Arizona</td>
</tr>
<tr>
<td>2</td>
<td>zebra</td>
<td>South Dakota</td>
</tr>
<tr>
<td>3</td>
<td>penguin</td>
<td>Tennessee</td>
</tr>
<tr>
<td>4</td>
<td>ass</td>
<td>California</td>
</tr>
<tr>
<td>5</td>
<td>warthog</td>
<td>Democratic Republic of the Congo</td>
</tr>
<tr>
<td>6</td>
<td>giraffe</td>
<td>China</td>
</tr>
<tr>
<td>7</td>
<td>gorilla</td>
<td>Taiwan</td>
</tr>
<tr>
<td>8</td>
<td>South Dakota</td>
<td>Tibet</td>
</tr>
<tr>
<td>9</td>
<td>aardwolf</td>
<td>Albania</td>
</tr>
<tr>
<td>10</td>
<td>zorilla</td>
<td>Greece</td>
</tr>
</tbody>
</table>
</body>
</html>
* * * * *
I tried it with tablesorter.js, tablesorter.min.js and both at the same time, with the same results. Nothing happens.
Can anyone tell me what I'm doing wrong? Thanks.