页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

定单管理上 JS表格排序第1/2页

发布：dxy 字体：[增加减小] 类型：转载

自己经常用的比较好用的效果经常用在定单管理上 JS表格排序不需要用ASP再计算一次

点击运行可以看到效果:

if (ie5 || dom) 
    initSortTable();

function initSortTable() { 
    arrowUp = document.createElement("SPAN"); 
    var tn = document.createTextNode("↓"); 
    arrowUp.appendChild(tn); 
    arrowUp.className = "arrow"; 
    arrowDown = document.createElement("SPAN"); 
    var tn = document.createTextNode("↑"); 
    arrowDown.appendChild(tn); 
    arrowDown.className = "arrow"; 
}

function sortTable(tableNode, nCol, bDesc, sType) { 
    var tBody = tableNode.tBodies[0]; 
    var trs = tBody.rows; 
    var a = new Array();

for (var i=0; i<trs.length; i++) { 
        a[i] = trs[i]; 
    }

a.sort(compareByColumn(nCol,bDesc,sType));

for (var i=0; i<a.length; i++) { 
        tBody.appendChild(a[i]); 
    } 
}

function CaseInsensitiveString(s) { 
    return String(s).toUpperCase(); 
}

function parseDate(s) { 
    return Date.parse(s.replace(/\-/g, '/')); 
}

function toNumber(s) { 
    return Number(s.replace(/[^0-9\.]/g, "")); 
}

function compareByColumn(nCol, bDescending, sType) { 
    var c = nCol; 
    var d = bDescending;

var fTypeCast = String;

if (sType == "Number") 
        fTypeCast = Number; 
    else if (sType == "Date") 
        fTypeCast = parseDate; 
    else if (sType == "CaseInsensitiveString") 
        fTypeCast = CaseInsensitiveString; 
    return function (n1, n2) { 
        if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c]))) 
            return d ? -1 : +1; 
        if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c]))) 
            return d ? +1 : -1; 
        return 0; 
    }; 
}

function sortColumn(e) { 
    var tmp, el, tHeadParent; 
    if (ie5) 
        tmp = e.srcElement; 
    else if (dom) 
        tmp = e.target; 
    tHeadParent = getParent(tmp, "THEAD"); 
    el = getParent(tmp, "TD"); 
    if (tHeadParent == null) 
        return;

if (el != null) { 
        var p = el.parentNode; 
        var i; 
        if (el._descending) // catch the null 
        el._descending = false; 
        else 
        el._descending = true;

if (tHeadParent.arrow != null) { 
            if (tHeadParent.arrow.parentNode != el) { 
                tHeadParent.arrow.parentNode._descending = null;    
            } 
            tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow); 
        } 
        if (el._descending) 
            tHeadParent.arrow = arrowDown.cloneNode(true); 
        else 
            tHeadParent.arrow = arrowUp.cloneNode(true); 
        el.appendChild(tHeadParent.arrow);

// get the index of the td 
        for (i=0; i<p.cells.length; i++) { 
            if (p.cells[i] == el) break; 
        } 
        var table = getParent(el, "TABLE"); 
        // can't fail

sortTable(table,i,el._descending, el.getAttribute("type")); 
    } 
}

function getInnerText(el) { 
    if (ie5) return el.innerText; //Not needed but it is faster

var str = "";

for (var i=0; i<el.childNodes.length; i++) { 
        switch (el.childNodes.item(i).nodeType) { 
            case 1: //ELEMENT_NODE 
                str += getInnerText(el.childNodes.item(i)); 
                break; 
            case 3: //TEXT_NODE 
                str += el.childNodes.item(i).nodeValue; 
                break; 
        } 
    } 
    return str; 
}

function getParent(el, pTagName) { 
    if (el == null) return null; 
    else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) 
        return el; 
    else 
        return getParent(el.parentNode, pTagName); 
} 
</script> 
<table width="100%" border="1" cellspacing="0" cellpadding="1" onclick="sortColumn(event)"> 
 <thead> <tr> 
    <td><a href='#'>序号</a></th> 
    <td><a href="#">名称</a></th> 
    <td><a href="#">金额</a></th> 
    <td><a href="#">数量</a></th> 
    <td><a href="#">日期</a> </th> 
    <td><a href="#">点击</a></th> 
  </tr></thead> 
  <tr> 
    <td>1</td> 
    <td>a</td> 
    <td>1.26</td> 
    <td>5</td> 
    <td>2006-1-5</td> 
    <td>321</td> 
  </tr> 
  <tr> 
    <td>2</td> 
    <td>e</td> 
    <td>12.65</td> 
    <td>6</td> 
    <td>2006-10-4</td> 
    <td>456</td> 
  </tr> 
  <tr> 
    <td>3</td> 
    <td>f</td> 
    <td>21.03</td> 
    <td>4</td> 
    <td>2006-2-7</td> 
    <td>122</td> 
  </tr> 
  <tr> 
    <td>4</td> 
    <td>g</td> 
    <td>21.33</td> 
    <td>3</td> 
    <td>2006-8-9</td> 
    <td>147</td> 
  </tr> 
  <tr> 
    <td>5</td> 
    <td>h</td> 
    <td>12.21</td> 
    <td>5</td> 
    <td>2007-8-1</td> 
    <td>1024</td> 
  </tr> 
  <tr> 
    <td>6</td> 
    <td>d</td> 
    <td>14.36</td> 
    <td>2</td> 
    <td>2003-4-9</td> 
    <td>99</td> 
  </tr> 
  <tr> 
    <td>7</td> 
    <td>a</td> 
    <td>25.3</td> 
    <td>3</td> 
    <td>2006-10-4</td> 
    <td>122</td> 
  </tr> 
  <tr> 
    <td>8</td> 
    <td>wd</td> 
    <td>0.35</td> 
    <td>44</td> 
    <td>2008-10-25</td> 
    <td>444</td> 
  </tr> 
  <tr> 
    <td>9</td> 
    <td>f</td> 
    <td>12.1</td> 
    <td>56</td> 
    <td>2006-10-23</td> 
    <td>123</td> 
  </tr> 
  <tr> 
    <td>10</td> 
    <td>w</td> 
    <td>123.3</td> 
    <td>12</td> 
    <td>2005-5-7</td> 
    <td>321</td> 
  </tr> 
  <tr> 
    <td>11</td> 
    <td>e</td> 
    <td>654</td> 
    <td>12</td> 
    <td>2006-9-12</td> 
    <td>99</td> 
  </tr> 
  <tr> 
    <td>12</td> 
    <td>t</td> 
    <td>12.21</td> 
    <td>13</td> 
    <td>2007-7-3</td> 
    <td>100</td> 
  </tr> 
  <tr> 
    <td>13</td> 
    <td>f</td> 
    <td>12.64</td> 
    <td>14</td> 
    <td>2001-12-31</td> 
    <td>32</td> 
  </tr> 
</table>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

当前1/2页 1 2 下一页

Tags：定单管理上 JS表格排序

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

·在百度中搜索关于“定单管理上 JS表格排序”相关内容
·在谷歌中搜索关于“定单管理上 JS表格排序”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

定单管理上 JS表格排序第1/2页

文章评论

同类文章

最近更新

热点排行

定单管理上 JS表格排序第1/2页

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行