zoukankan html css js c++ java

表格排序插件tablesorter的初步使用介绍

官网：http://tablesorter.com/docs/

下载相应的js文件：

http://jquery.com/

https://github.com/christianbach/tablesorter

demo：

<html>
	<head>
			<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
		<script type="text/javascript" src="jquery.tablesorter.js"></script> 
		<script>
			$(document).ready(function() 
			{ 
				$("#myTable").tablesorter(); 
			} 
		); 
		</script>
	</head>
	
	<table border='1' id="myTable">
		<thead>
			<tr>
				<th rowspan="3" style="text-align:center;">公司</th>
				<th colspan="4" style="text-align:center;">一月</th>
				<th colspan="4" style="text-align:center;">二月</th>
			</tr>

			<tr>
				<th colspan="2" style="text-align:center;">时均值</th>
				<th colspan="2" style="text-align:center;">日均值</th>
				<th colspan="2" style="text-align:center;">时均值</th>
				<th colspan="2" style="text-align:center;">日均值</th>
			</tr>

			<tr>
				<th style="text-align:center;">废水</th>
				<th style="text-align:center;">废气</th>
				<th style="text-align:center;">废水</th>
				<th style="text-align:center;">废气</th>
				<th style="text-align:center;">废水</th>
				<th style="text-align:center;">废气</th>
				<th style="text-align:center;">废水</th>
				<th style="text-align:center;">废气</th>
			</tr>
		</thead>
		<tr>
			<td class="company_td">河南省豫鹤同力水泥有限公司</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">1</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">2</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">3</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">4</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">5</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">6</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">7</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">8</td>
			
		<tr>
		<tr>
			<td class="company_td">河南省豫鹤同力水泥</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">13</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">23</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">34</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">45</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">55</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">6</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">7</td>
			<td style="text-decoration: underline; color: rgb(0, 0, 255);">82</td>
			
		<tr>
		
	</table>
    
    

</html>

查看全文

相关阅读:
Frans Kaashoek获得ACM青年研究者奖狼人:
7款相当给力的上网本应用狼人:
Google对外发布C++编码规范狼人:
10个超棒的HTML5素描及绘画设计工具狼人:
Fix Bug的五个阶段狼人:
【观点】如果你不是程序员该如何雇佣程序员呢狼人:
8款超赞的最新jQuery插件工具狼人:
对Web设计有用的10组免费漂亮的图标狼人:
C语言，美丽的语言狼人:
环境系统工具[CentOS]安装rar解压工具

原文地址：https://www.cnblogs.com/liangping/p/7793216.html