当前位置：Gxlcms > JavaScript > 定单管理上 JS表格排序第1/2页

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

时间：2021-07-01 10:21:17 帮助过：12人阅读

自己经常用的比较好用的效果经常用在定单管理上 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 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>序号</th> 
    <td>名称</th> 
    <td>金额</th> 
    <td>数量</th> 
    <td>日期 </th> 
    <td>点击</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 全选注:如需引入外部Js需刷新才能执行] 12下一页阅读全文

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

人气教程排行