首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用于table内容排序

Posted in Javascript onJuly 21, 2006

<!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=utf-8" />
<title>sort table</title>
<style type="text/css">
a {
 color:#000000;
 font-weight: bold;
 text-decoration: none;
}
</style>
<SCRIPT src="sorttable.js"></SCRIPT>
</head>
<body>
<p>点击标题排序</p>
<table width="481" border="1" cellpadding="0" cellspacing="3" id="mytable" class="sortable">
  <tbody>
    <tr>
      <th width="165">Name</th>
      <th width="101">Salary</th>
      <th width="101" align="center">Extension</th>
      <th width="99" align="center">Start date</th>
    </tr>
    <tr>
      <td>Bloggs, Fred</td>
      <td>$12000.00</td>
      <td align="center">1353</td>
      <td align="center">18/08/2003</td>
    </tr>
    <tr>
      <td>Turvey, Kevin</td>
      <td>$191200.00</td>
      <td align="center">2342</td>
      <td align="center">02/05/1979</td>
    </tr>
    <tr>
      <td>Mbogo, Arnold</td>
      <td>$32010.12</td>
      <td align="center">2755</td>
      <td align="center">09/08/1998</td>
    </tr>
    <tr>
      <td>Shakespeare, Bill</td>
      <td>$122000.00</td>
      <td align="center">3211</td>
      <td align="center">12/11/1961</td>
    </tr>
    <tr>
      <td>Shakespeare, Hamnet</td>
      <td>$9000</td>
      <td align="center">9005</td>
      <td align="center">01/01/2002</td>
    </tr>
    <tr>
      <td>Fitz, Marvin</td>
      <td>$3300</td>
      <td align="center">5554</td>
      <td align="center">22/05/1995</td>
    </tr>
  </tbody>
</table>
<p><a href="http://www.flaspx.com/weblog" target="_blank">Alpha's blog</a></p>
</body>
</html>

addEvent(window, "load", sortables_init);
var SORT_COLUMN_INDEX;
function sortables_init() {
    // Find all tables with class sortable and make them sortable
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0;ti<tbls.length;ti++) {
        thisTbl = tbls[ti];
        if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
            //initTable(thisTbl.id);
            ts_makeSortable(thisTbl);
        }
    }
}
function ts_makeSortable(table) {
    if (table.rows && table.rows.length > 0) {
        var firstRow = table.rows[0];
    }
    if (!firstRow) return;
    // We have a first row: assume it's the header, and make its contents clickable links
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        cell.innerHTML = '<a href="#" class="sortheader" '+ 
        'onclick="ts_resortTable(this, '+i+');return false;">' + 
        txt+'<span class="sortarrow"></span></a>';
    }
}
function ts_getInnerText(el) {
 if (typeof el == "string") return el;
 if (typeof el == "undefined") { return el };
 if (el.innerText) return el.innerText; //Not needed but it is faster
 var str = "";
 var cs = el.childNodes;
 var l = cs.length;
 for (var i = 0; i < l; i++) {
  switch (cs[i].nodeType) {
   case 1: //ELEMENT_NODE
    str += ts_getInnerText(cs[i]);
    break;
   case 3: //TEXT_NODE
    str += cs[i].nodeValue;
    break;
  }
 }
 return str;
}
function ts_resortTable(lnk,clid) {
    // get the span
    var span;
    for (var ci=0;ci<lnk.childNodes.length;ci++) {
        if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
    }
    var spantext = ts_getInnerText(span);
    var td = lnk.parentNode;
    var column = clid || td.cellIndex;
    var table = getParent(td,'TABLE');
    // Work out a type for the column
    if (table.rows.length <= 1) return;
    var itm = ts_getInnerText(table.rows[1].cells[column]);
    sortfn = ts_sort_caseinsensitive;
    if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
    if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
    if (itm.match(/^[$]/)) sortfn = ts_sort_currency;
    if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
    SORT_COLUMN_INDEX = column;
    var firstRow = new Array();
    var newRows = new Array();
    for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
    for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }
    newRows.sort(sortfn);
    if (span.getAttribute("sortdir") == 'down') {
        ARROW = '↑';
        newRows.reverse();
        span.setAttribute('sortdir','up');
    } else {
        ARROW = '↓';
        span.setAttribute('sortdir','down');
    }
    // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
    // don't do sortbottom rows
    for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
    // do sortbottom rows only
    for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
    // Delete any other arrows there may be showing
    var allspans = document.getElementsByTagName("span");
    for (var ci=0;ci<allspans.length;ci++) {
        if (allspans[ci].className == 'sortarrow') {
            if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
                allspans[ci].innerHTML = '';
            }
        }
    }
    span.innerHTML = ARROW;
}
function getParent(el, pTagName) {
 if (el == null) return null;
 else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
  return el;
 else
  return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
    // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa.length == 10) {
        dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
    } else {
        yr = aa.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
    }
    if (bb.length == 10) {
        dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
    } else {
        yr = bb.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
    }
    if (dt1==dt2) return 0;
    if (dt1<dt2) return -1;
    return 1;
}
function ts_sort_currency(a,b) { 
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    return parseFloat(aa) - parseFloat(bb);
}
function ts_sort_numeric(a,b) { 
    aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); 
    if (isNaN(bb)) bb = 0;
    return aa-bb;
}
function ts_sort_caseinsensitive(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
    if (aa==bb) return 0;
    if (aa<bb) return -1;
    return 1;
}
function ts_sort_default(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa==bb) return 0;
    if (aa<bb) return -1;
    return 1;
}

function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}

用于table内容排序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Vuex入门到上手教程
Jun 20 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
脚本收藏iframe
Jul 21 #Javascript
document.all还是document.getElementsByName?
Jul 21 #Javascript
关于IFRAME 自适应高度的研究
Jul 20 #Javascript
怎么用javascript进行拖拽
Jul 20 #Javascript
繁简字转换功能
Jul 19 #Javascript
Javascript - HTML的request类
Jul 15 #Javascript
表单的一些基本用法与技巧
Jul 15 #Javascript
cv2(1) MyBatis(5) OpenGL(1) BeautifulSoup4(2) ElementTree(1) tfx(1) Flask Web(1) OpenAI baselines(1) exec(1) 面向接口(1)
You might like
PHP生成树的方法
2015/07/28 PHP
php防止用户重复提交表单
2015/11/02 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python中的filter()函数的用法
2015/04/27 Python
浅谈Python中数据解析
2015/05/05 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
个人现实表现材料
2014/02/04 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
节约粮食标语
2014/06/18 职场文书
高中运动会广播稿
2014/09/16 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
《时代广场的蟋蟀》读后感：真挚友情，温暖世界！
2020/01/08 职场文书