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>
    

      

  • 相关阅读:
    css样式之补充
    css样式之属性操作
    css之操作属性
    前端基础之css样式(选择器)
    mysql之视图,触发器,事务等
    pymysql模块
    MySQL之IDE工具介绍及数据备份
    mysql老是停止运行该怎么解决
    mysql之索引原理与慢查询优化
    MySQL 5.7.9版本sql_mode=only_full_group_by问题
  • 原文地址:https://www.cnblogs.com/liangping/p/7793216.html
Copyright © 2011-2022 走看看