Table排序
<html> <head> <title>tablesorter表单排序插件</title> <link type ="text/css" href="default.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.5.1.js"></script> <script type="text/javascript" src="jquery.metadata.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript"> //以下代码表示对特定的Table排序 $(function() { $("#feigeTable").tablesorter(); //$("#largess1").tablesorter(); }); </script> </head> <body> <h3><td class="{sortValue: 0}">80</td>表示自定义的顺序,表示单击该列时,80排到第一的位置</h3> <table id="feigeTable" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Major</th> <th>Sex</th> <th>English</th> <th>Japanese</th> <th>Calculus</th> <th>Geometry</th> <th>Geometry</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Major</th> <th>Sex</th> <th>English</th> <th>Japanese</th> <th>Calculus</th> <th>Geometry</th> <th>Geometry</th> </tr> </tfoot> <tbody id="feige"> <tr> <td>买</td> <td>Languages</td> <td>male</td> <td >80</td> <td>70</td> <td>75</td> <td>80</td> <td><select><option>brian</option><option>christian</option></select></td> </tr> <tr> <td>卖</td> <td>Mathematics</td> <td>male</td> <td>90</td> <td>88</td> <td>100</td> <td>90</td> <td><select><option>brian</option><option>christian</option></select></td> </tr> <tr> <td>买</td> <td>Languages</td> <td>female</td> <td>85</td> <td>95</td> <td>80</td> <td>85</td> <td><select><option>brian</option><option>christian</option></select></td> </tr> <tr> <td>卖</td> <td>Languages</td> <td>male</td> <td>60</td> <td>90</td> <td>100</td> <td>100</td> <td><select><option>angus</option><option>zebra</option></select></td> </tr> </tbody> </table> <h3>只是第二个表单,没有排序</h3> <table id="feigeTable2" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Major</th> <th>Sex</th> <th class="{sorter:'metadata'}">English</th> <th>Japanese</th> <th>Calculus</th> <th>Geometry</th> <th>Geometry</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Major</th> <th>Sex</th> <th>English</th> <th>Japanese</th> <th>Calculus</th> <th>Geometry</th> <th>Geometry</th> </tr> </tfoot> <tbody id="feige1"> <tr> <td>买</td> <td>Languages</td> <td>male</td> <td class="{sortValue: 0}">80</td> <td>70</td> <td>75</td> <td>80</td> <td><select><option>brian</option><option>christian</option></select></td> </tr> <tr> <td>卖</td> <td>Mathematics</td> <td>male</td> <td class="{sortValue: 1}">90</td> <td>88</td> <td>100</td> <td>90</td> <td><select><option>brian</option><option>christian</option></select></td> </tr> <tr> <td>买</td> <td>Languages</td> <td>female</td> <td class="{sortValue: 2}">85</td> <td>95</td> <td>80</td> <td>85</td> <td><select><option>brian</option><option>christian</option></select></td> </tr> <tr> <td>卖</td> <td>Languages</td> <td>male</td> <td class="{sortValue: 3}">60</td> <td>90</td> <td>100</td> <td>100</td> <td><select><option>angus</option><option>zebra</option></select></td> </tr> </tbody> </table> </body> </html>
https://files.cnblogs.com/files/feige/Table%E6%8E%92%E5%BA%8Ftablesorter%E6%8F%92%E4%BB%B6.rar