zoukankan      html  css  js  c++  java
  • 利用tablesorter实现表格排序

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="jquery.tablesorter.js"></script> 
    <script type="text/javascript">
    $(document).ready(function() 
        { 
            $(".table_result").tablesorter(); 
        } 
    ); 
    </script>
    <style type="text/css">
    .table_result{
        width:100%;
        font-size: 12px;
        color: #666666;
        line-height: 18px;
        p0: expression(this.align='center');p1: expression(this.cellSpacing=1);p2: expression(this.cellPadding=0);p3: expression(this.border=0);
        background-color:#fcfcfc;
        border: 1px solid #c1c1c1;
        text-align: center;
    }
    .table_result_title{
        FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#bac6ca, EndColorStr=#dbe3e6);
        height: 20px;
        color: #000066;
        background-color: #dbe3e6;
        background-position: bottom;
     }
    </style>
    </head>
    
    <body>
    <table id="myTable" class="table_result" style=" 100%"  cellpadding="1" cellspacing="0" border="1" bordercolor="#CCE6FE"> 
    <thead> 
    <tr> 
        <th class="table_result_title">AAAA</th> 
        <th class="table_result_title">BBBB</th> 
        <th class="table_result_title">CCCC</th> 
        <th class="table_result_title">DDDD</th> 
        <th class="table_result_title">EEEE</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
        <td>3</td> 
        <td>d</td> 
        <td>张三</td> 
        <td>¥50.00</td> 
        <td>dagadf</td> 
    </tr> 
    <tr> 
        <td>2</td> 
        <td>a</td> 
        <td>李四</td> 
        <td>¥50.00</td> 
        <td>bgshs</td> 
    </tr> 
    <tr> 
        <td>1</td> 
        <td>c</td> 
        <td>王二</td> 
        <td>¥100.00</td> 
        <td>ergse</td> 
    </tr> 
    <tr> 
        <td>4</td> 
        <td>b</td> 
        <td>麻子</td> 
        <td>¥50.00</td> 
        <td>nsdfg</td> 
    </tr> 
    </tbody> 
    </table> 
    </body>
    </html>
  • 相关阅读:
    关于git的简单使用
    手机设备上调试接口,查看错误信息
    用after伪类清除浮动
    js字母大小写转换方法
    使用淘宝 NPM 镜像
    JS判断类型
    JS判断客户端是手机还是PC的2个代码
    微信小程序 WebSocket
    服务器安全管理
    Linux下禁止ping最简单的方法
  • 原文地址:https://www.cnblogs.com/yeyerl/p/7424662.html
Copyright © 2011-2022 走看看