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

      

  • 相关阅读:
    Oracle学习 第25天 Oracle版的Profiler
    Oracle学习 第24天 .net EF连Oracle
    项目中各子系统之间数据交互的方法总结与心得
    Python学习 第7天 爬虫-1 构思
    Oracle学习 第23天 Oracle视图、表、SqlServer、excel、csv的互导
    Python学习 第6天 类、模块、包
    Python学习 第5天 函数
    Javascript/Jquery实现日期前一天后一天
    Javascript/Jquery遇到字符串自动NaN的问题
    Eclipse打包jar
  • 原文地址:https://www.cnblogs.com/liangping/p/7793216.html
Copyright © 2020-2023  润新知