表格排序插件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>

  

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