table排序，多个表格排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>table表格排序</title>
    <style type="text/css">
        .fu_list{ width:500px; border:1px solid #ebebeb;line-height:20px; font-size:12px;}
        .fu_list thead td{background-color:#ebebeb;}
        .fu_list td{padding:5px;}
        .fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}
        .fu_list a:link, .fu_list a:visited, .fu_list a:hover, .fu_list a:active{text-decoration:none;color:#333;}
        .fu_list thead a{padding-right:15px;}
        .fu_list thead a.up, .fu_list thead a.down{ background:url(‘‘) right center no-repeat; }
        .fu_list thead a.down{background-image:url(‘‘)}

        .hoverTr{background-color:Orange;}
    </style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable">
    <thead>
    <tr>
        <td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
        <td width="150" align="center"><a href="javascript:he(‘idTable‘)" id="idAddtime" class="up">上传时间</a></td>
        <td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td _order="JSCSS">JSCSS</td>
        <td align="center" _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td>
        <td align="right" _order="433247">433247</td>
    </tr>
    <tr>
        <td _order="逗你玩">逗你玩</td>
        <td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td>
        <td align="right" _order="11394">11394</td>
    </tr>
    <tr>
        <td _order="张迪">张迪</td>
        <td align="center" _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td>
        <td align="right" _order="351">351</td>
    </tr>
    <tr>
        <td _order="Index">Index</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="14074">14074</td>
    </tr>
    <tr>
        <td _order="阿波罗">阿波罗</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="2844">2844</td>
    </tr>
    <tr>
        <td _order="张涛">张涛</td>
        <td align="center" _order="2012/10/4 20:21:54">2012/10/4 20:21:54</td>
        <td align="right" _order="1236">1236</td>
    </tr>
    <tr>
        <td _order="jSSon">jSSon</td>
        <td align="center" _order="2010/12/12 8:51:09">2010/12/12 8:51:09</td>
        <td align="right" _order="10101">10101</td>
    </tr>
    </tbody>
</table>
<hr style="color: #942a25">

<table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable2">
    <thead>
    <tr>
        <td> <a href="javascript:void(0)" id="idTitle2">名称</a> / <a href="javascript:void(0)" id="idExt2">类型</a></td>
        <td width="150" align="center"><a href="javascript:sort(‘idTable2‘)" id="idAddtime2" class="up">上传时间</a></td>
        <td width="50" align="center"><a href="javascript:void(2)" id="idSize2">大小</a></td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td _order="JSCSS">JSCSS</td>
        <td align="center" _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td>
        <td align="right" _order="433247">433247</td>
    </tr>
    <tr>
        <td _order="逗你玩">逗你玩</td>
        <td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td>
        <td align="right" _order="11394">11394</td>
    </tr>
    <tr>
        <td _order="张迪">张迪</td>
        <td align="center" _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td>
        <td align="right" _order="351">351</td>
    </tr>
    <tr>
        <td _order="Index">Index</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="14074">14074</td>
    </tr>
    <tr>
        <td _order="阿波罗">阿波罗</td>
        <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
        <td align="right" _order="2844">2844</td>
    </tr>
    <tr>
        <td _order="张涛">张涛</td>
        <td align="center" _order="2012/10/4 20:21:54">2012/10/4 20:21:54</td>
        <td align="right" _order="1236">1236</td>
    </tr>
    <tr>
        <td _order="jSSon">jSSon</td>
        <td align="center" _order="2010/12/12 8:51:09">2010/12/12 8:51:09</td>
        <td align="right" _order="10101">10101</td>
    </tr>
    </tbody>
</table>

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="TableOrder.js" type="text/javascript"></script>
<!--<script src="ZhCN_Pinyin.min.js" type="text/javascript"></script>-->
<script type="text/javascript">

    TableOrderOper.Init("idTable", 0, {
        OnShow: function (i, trJqObj, _tbodyObj) {
            trJqObj.attr("class", ((i + 1) % 2 == 0 ? "hoverTr" : ""));
        }
    });
    TableOrderOper.SetOrder("idTitle", 0, { ValAttr: "_order", DataType: "string" });
    TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" });
    TableOrderOper.SetOrder("idSize", 2, { DataType: "int", DefaultOrder: true, OnClick: function () {
        alert("idSize");
    } });

//    function sort(a){
//        TableOrderOper.Init(a, 0, {
//            OnShow: function (i, trJqObj, _tbodyObj) {
//                trJqObj.attr("class", ((i + 1) % 2 == 0 ? "hoverTr" : ""));
//            }
//        });
//        TableOrderOper.SetOrder("idAddtime2", 1, { ValAttr: "_order", DataType: "date" });
//    }
//    function he(a){
//        TableOrderOper.Init(a, 0, {
//            OnShow: function (i, trJqObj, _tbodyObj) {
//                trJqObj.attr("class", ((i + 1) % 2 == 0 ? "hoverTr" : ""));
//            }
//        });
//        TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" });
//    }
</script>
</body>
</html>

时间： 2024-10-12 03:19:24

table排序，多个表格排序的相关文章

javascript实现简单的table表格排序特效

javascript实现简单的table表格排序特效,在这个列子中,练习了table的操作,主要有:tBodies.rows.cells,还有有关数组的排序方法:sort javascript中有关table元素的属性.方法: 1.caption:保存着对<caption>元素(如果有)的指针 2.tBodies:是一个<tbody>元素的HTMLCollection 3.tFoot:保存着对<tfoot>元素(如果有)的指针 4.tHead:保存着对<thead

jquery 表格排序，实时搜索表格内容

jquery 表格排序,实时搜索表格内容演示 XML/HTML Code <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sor

html表格排序之完全详解

<!DOCTYPE HTML> <html> <head> <title> 表格排序 </title> <meta charset="utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content="t

使用jQuery UI 实现表格排序

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格排序</title> <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"></head> <body><table id="myTabl

ajax json 表格排序，分页，自定义每页数量

ajax json 表格排序,分页,自定义每页数量点击表头可以排序,按照升序或者降序,另外支持多列排序设置每页数量演示 XML/HTML Code <table id='example3'> <thead> <tr> <th>ID</th> <th>First name</th> <th>Last name</th> <th>Grade</th> <th>G

使用jquery的tablesorter插件进行表格排序

今天在学习bootstrap的时候,突然看见tablesorter这个东东了,立马百度了一下,发现了这个东东.. 下面说一下今天我在项目中看见前辈们用的表格排序 tablesorter的官方网站:http://tablesorter.com/docs/ 使用方法:1.下载tablesorter http://tablesorter.com/jquery.tablesorter.zip 2.解压文件,将jquery和jquery.tablesorter.min.js导入到项目文件中 3.修改htm

js学习总结----经典小案例之表格排序

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-family:"微软雅黑";font-size:14px

JS实现表格排序

今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows; var trValue

jQuery表格排序组件-tablesorter

一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script>  <link href=