定单管理上 JS表格排序

时间:2020-05-11 人气:0

自己经常用的比较好用的效果经常用在定单管理上 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 全选注:如需引入外部Js需刷新才能执行]

客户需要一个这样的效果单击一个图片显示隐藏的5个导航图片
就是差图片渐隐渐显的效果感觉太生硬大家帮忙看看改改谢谢代码如下

<!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>顺序显示</title> 
<style type="text/css"> 
#container{ 
    position:absolute; 
    padding:10px; 
} 
#container li{ 
    display:none; 
    list-style:none; 
    float:left; 
    margin:5px; 
    padding:2px; 
    width:80px; 
    height:80px; 
    border:3px #ccc double; 
    font:30px Verdana, Arial, Helvetica, sans-serif; 
    color:#666; 
    background-color: #eee; 
    FILTER: alpha(opacity=50); 
} 
#container .orderly-change{ 
    border:3px #666 double; 
        FILTER: alpha(opacity=100); 
} 
</style> 
</head> 
<body> 
<a href="#" onclick="orderly_show()"><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/26317.jpg"  border="0" /></a> <-------点一下这张图片

</ul> 
<script type="text/javascript"> 
var i=0,j 
function orderly_show(){ 
    var container_li=document.getElementById("container").getElementsByTagName("li"); 
    if(i<container_li.length){ 
        container_li[i].style.display="block"; 
        if(j<container_li.length){ 
            container_li[j].className="orderly-change"; 
        } 
        i++; 
        j=i-1; 
    } 
    else if(i=container_li.length){ 
        container_li[j].className="orderly-change"; 
    } 
    setTimeout("orderly_show()",900); 
} 
//orderly_show(); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容