zoukankan      html  css  js  c++  java
  • 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>
    http://files.cnblogs.com/files/feige/Table%E6%8E%92%E5%BA%8Ftablesorter%E6%8F%92%E4%BB%B6.rar
  • 相关阅读:
    视频分帧
    windows开启ssh服务
    使用geopy计算经纬度表示的坐标之间的距离
    哔站视频下载
    后缀树(Suffix Tree)
    [回滚莫队] AtCoder 歴史の研究
    [长链剖分优化dp] Codeforces 1499F
    [长链剖分优化dp] BZOJ 3522/4543 Hotel
    长链剖分O(nlogn)-O(1)求K级祖先
    [数论] Codeforces 1499D The Number of Pairs
  • 原文地址:https://www.cnblogs.com/feige/p/6045055.html
Copyright © 2011-2022 走看看