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>
    

      

  • 相关阅读:
    springboot和springcloud运行在外部tomcat
    kafka-线上单机broker扩容
    kafka集群部署和测试
    k8s-学习笔记2-容器部署nginx负载均衡
    logstash部署
    docker-学习笔记7-dockerfile
    kafka常用命令
    kafka-消费滞后(Lag)监控
    kibana-部署
    es-部署
  • 原文地址:https://www.cnblogs.com/liangping/p/7793216.html
Copyright © 2011-2022 走看看