emu常用工具之一：表格排序脚本

文件名：sortTable2.js/**
**  对任意一个表格进行排序之二： **  作者：emu(ston) **  使用：
在网页中定义表格的时候加入如下标记：
<TABLE sortable=true>
该网页即可排序。 可以指定一行为标题栏，按如下格式：
<TR sortLine=true >
如不指定则为表格第一行。 默认按照字母顺序排序，如某列需按数字排序，对应的标题栏要这样定义
<TD sortType="float">ddd</TD> **  注意： 
1 如果表格中存在tHead部分，sortLine行应该在thead中
2 如不指定sortLine，默认表格的第一行为sortLine
3 排序算法未经优化，在表格比较大的时候速度会比较慢（优化的算法呢？下回吧。）
4 这个版本的排序完全使用 innerHTML ,也许会安全一些，速度也许也会慢一些。*/
var tmptables = document.all.tags("table");
for (var i=0;i<tmptables.length;i++)
if (tmptables[i].sortable)
attachTable(tmptables[i])
var sortLine,sortCol;function tableToArray(tmptable)
{
var result = new Array();
if (tmptable.tHead == null)
{
for (var i=tmptable.firstChild.children.length-1;i>sortLine;i--)
{
var tmptr = tmptable.firstChild.children[i];//如果不存在thead的话就把tbody中在sortLine行之下的行排序
result[result.length] = tmptr.cloneNode(true);
}
}
else
{
for (var i=tmptable.children[1].children.length-1;i>-1;i--)
{
var tmptr =tmptable.children[1].children[i]; //如果存在thead的话则默认把tbody中的全部行排序
result[result.length] = tmptr.cloneNode(true);
}
}
return result;
}function sortArrayFloat(arg1,arg2) //根据指定的列按浮点数排序
{ 
if (parseFloat(arg1.children[sortCol].innerText) > parseFloat(arg2.children[sortCol].innerText)) return 1
else return -1
}
function sortArrayString(arg1,arg2) //根据指定的列按串排序
{ 
if (arg1.children[sortCol].innerText>arg2.children[sortCol].innerText) return 1
else return -1
}function arrayToTable(ar,tmptable)
{
if (tmptable.tHead == null)
{
tmptbody = tmptable.firstChild;//如果不存在thead的话就把tbody中在sortLine行之下的行排序
for (var i=tmptbody.children.length-1;i>sortLine;i--)
{
var tmptr =tmptbody.children[i];
for (var j=0;j<tmptr.children.length;j++ )
{
tmptr.children[j].innerHTML = ar[tmptbody.children.length-i-1].children[j].innerHTML
}
}
}
else
{
tmptbody = tmptable.children[1];
for (var i=tmptbody.children.length-1;i>-1;i--)
{
var tmptr =tmptbody.children[i];
for (var j=0;j<tmptr.children.length;j++ )
{
tmptr.children[j].innerHTML = ar[tmptbody.children.length-i-1].children[j].innerHTML
}
}
}
}function sortTable()
{ var elm = event.srcElement;
var tmptr = elm.parentNode;
tmptable = tmptr.parentNode.parentNode; for (var i=0;i<tmptr.children.length; i++)
{
if (tmptr.children[i] == elm )
break
}
sortCol = i;//获得被点击的列
sortLine = tmptable.sortLine;//获得被点击的行
var ar = tableToArray(tmptable);//把行转换为数组
if (elm.sortType == "float")
ar.sort(sortArrayFloat);//排序
else
ar.sort(sortArrayString);//排序 if (elm.reverse == true)
{
elm.reverse = false;
ar.reverse();
}
else
{
elm.reverse = true;
}
arrayToTable(ar,tmptable);
}function attachTable(tmptable)
// 为一个表格的一行添加事件
{
var line = 0;
for (var i=0;i<tmptable.firstChild.children.length ; i++)
if (tmptable.firstChild.children[i].sortLine)
line = i ;
var tds = tmptable.firstChild.children[line].children;
for (var i=0;i<tds.length;i++)
{
tds[i].attachEvent("onclick",sortTable);
tds[i].style.cursor="hand";
tds[i].style.fontWeight="bold"
}
tmptable.sortLine=line;
}
使用示范：<html>
<head>
<title></title>
</head>
<body>
<TABLE sortable=true>
<thead>
<TR>
<TD colspan=4>考试成绩</TD>
</TR>
<TR sortLine=true >
<TD>姓名</TD>
<TD sortType="float">语文</TD>
<TD sortType="float">数学</TD>
<TD sortType="float">英语</TD>
</TR>
</thead>
<tbody>
<TR>
<TD>aaa</TD>
<TD>65</TD>
<TD>60</TD>
<TD>87</TD>
</TR>
<TR>
<TD>bbb</TD>
<TD>75</TD>
<TD>60</TD>
<TD>85</TD>
</TR>
<TR>
<TD>ccc</TD>
<TD>55</TD>
<TD>74</TD>
<TD>73</TD>
</TR>
<TR>
<TD>ddd</TD>
<TD>95</TD>
<TD>90</TD>
<TD>100</TD>
</TR>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center style="font-size:15;color:red">
by emu(ston) 2002
</td>
</tr>
</tfoot>
</TABLE>
<BR>
<SCRIPT LANGUAGE="JavaScript" src="sortTable2.js"></SCRIPT>
</body>
</html>

解决方案 »

  1.   

    注意事项：为了方便使用，这两个脚本都是直接自动运行的，所以要在网页的后面引入。也可以把：
    for (var i=0;i<tmptables.length;i++)
    if (tmptables[i].sortable)
    attachTable(tmptables[i])
    这个循环写成一个函数，在onload里面显式的调用。这样脚本就可以在文件的head里面引入了。
      

  2.   

    我不喜欢表格。
    我喜欢
    xml+xsl=(sort)=>xml+databinding
      

  3.   

    呵呵，又是一个夜猫子。把你的解决方法贴出来啊倒是。光说你喜欢什么什么算什么啊？我感觉xml+xsl速度不快，调试的时候也不是很直观，xmlspy又老是检测到局域网上有别人正在使用它，不让我启动，害得我老要断开网络来调，而且xml+xsl能做的事基本上不用它俩也能做（当然有例外，比如xml可以嵌套的，html就比较麻烦）。
    其实xslt基本上都是被我们当成一个HTML生成器的，不是吗？我并不是说html比xml好，我只是说，什么合用，就用什么。
      

  4.   

    <xml id=source></xml>
    <xml id=xsl></xml>
    <xml id=data></xml>
    <talbe datafld="#data"></table>
    用脚本跟踪source,动不动就要执行data.XMLDocument.loadXML(source.transformNode(xsl.XMLDocument))
    呵呵。。
    xsl是用来排序用而已。
    根据不同的排序，指定不同的xsl
      

  5.   

    这个：
    data.XMLDocument.loadXML(source.XMLDocument.transformNode(xsl.XMLDocument))
      

  6.   

    PS:
    我不是夜猫啦。。我每天4：00准时SLEEP的。
    刚好赶上中午饭。
      

  7.   

    我现在下去也能买东西喝啊
    不过懒了，还是烧COFFEE算了。。把Java烧死。。
      

  8.   

    呵呵。终于把水烧开，泡了壶乌龙。昨天一个室友问我说有没尺子，我说可惜尺子不能用javascript做，要不然我马上给你做个得了。
      

  9.   

    这个：？for(var i=0;i<100;i++)
    if(i%5)document.write("|");
    else document.write("!");打印出来，将就以下，呵呵。
      

  10.   

    不错嘛，可惜刻度上面没有数字呢。正而八经要做，该探测出来当前的显示器是几吋的(怕得为此作个控件)，计算出来荧屏的水平宽度，探测出来当前分辨率，然后用vml画出来尺子，最后还要把要量的东西摆到屏幕前比一比。要是拿它来量身高......
      

  11.   

    恩。。
    用CSS定义cm来打印。。
      

  12.   

    5555 最后一包coffee都完了
      

  13.   

    ：）
    我最爱的哪个，不知道在哪里。
    --------------
    coffee效力过期了。。88
      

  14.   

    XML确实是一个好办法，但是SPREEDSHEET也不错。唉，偶晚上要是不睡觉，第二天保准上不了班~。要扣money的
      

  15.   

    到，楼上两位晚上不睡觉，开个帖子当聊天室用，pfpf^_^
      

  16.   

    到，楼上两位晚上不睡觉，开个帖子当聊天室用，pfpf^_^
      

  17.   

    程式设计师与妓女： 
    1. 一样是靠出卖身体为生 
    2. 吃青春饭，人老珠黄肯定混不下去 
    3. 越高级收入越高，当然中间人的抽头会更高 
    4. 生活没有规律以夜生活为主，如果需要，□晨也要加班 
    5. 名声越大，越容易受到青睐 
    6. 必须尽最大可能满足客户各种各样非正常的需求 
    7. 鼓励创新精神 
    8. 群聚程式师的地方称软体园区，妓女集中的地方叫红灯区 
    9. 流动性较大，正常情况下没有工会 
    10. 如果怀孕了，既不能做程式员，也不能做妓女 
    11. 都为了防病毒的问题而烦恼.. 
    12. 当然，个中高手还专门以制毒传毒为乐 
    13. 一个是Plug & Play,一个是Plug $ Play 
    14. 工作状态相同工作时精神高度集中，最怕外界干扰，工作完毕身心放松，体会到一种不可替代的工作快乐！ 
    15. 女孩子最好还是不要做这两个职业，但还是有很多女孩子做 
    16. 除非在转行以后，否则都不愿意结婚 
    17. 他们都痛恨"微软"