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 http://tablesorter.com/docs/ 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" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <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.
