定单管理上 JS表格排序

2020-05-11 我要评论

自己经常用的比较好用的效果经常用在定单管理上 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需刷新才能执行]

js传值判断

猜您喜欢

05-11document.open() 与 document.write()
05-11yahoo 页面的标签效果
05-11点击广告后才能获得下载地址
05-11挺酷的一个倒计时
05-1112个div逐个显示效果
05-11怎样调用动态获取的自定义对象的方法
05-11如何限制在一个表格里面禁止使用右键
05-11PJBlog插件防刷新的在线播放器
05-11PJ Blog修改-禁止复制的代码和方法
05-11Hutia 的 JS 代码集
05-11有趣的思路~~JS仿 WINXP 注销桌面渐隐效果
05-11xmlHTTP实例
05-11一个级联菜单(IE ONLY),不过代码很精简!
05-11document.styleSheets[0].disabled
05-11实现iframe延时加载
05-11this.clientWidth和this.offsetWidth两个有什么不同
05-11一个JavaScript继承的实现
05-11添加、删除HTML结点 & 上传图片预览

定单管理上 JS表格排序

相关文章

猜您喜欢

今日热门