浏览 2532 次
|
锁定老帖子 主题：table排序
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-25
最后修改：2010-03-30
小弟第一次发帖，希望大家指教
HTML页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <TABLE id="orderTable" style="border:#C0CACD solid 1px; "> <TR> <TD class="orderTd" dataType="num">编号</TD> <TD class="orderTd">名字</TD> <TD class="orderTd" dataType="num">年龄</TD> <TD class="orderTd" dataType="num">学号</TD> <TD class="orderTd" dataType="char">班级</TD> </TR> <TBODY> <TR> <TD>01023</TD> <TD>张三</TD> <TD>23</TD> <TD>2009090233</TD> <TD>三年二班</TD> </TR> <TR> <TD>09234</TD> <TD>李四</TD> <TD>34</TD> <TD>20100931</TD> <TD>三年四班</TD> </TR> <TR> <TD>034512</TD> <TD>王五</TD> <TD>12</TD> <TD>20080323</TD> <TD>一年五班</TD> </TR> <TR> <TD>45445</TD> <TD>丁柳</TD> <TD>43</TD> <TD>20010923</TD> <TD>七年五班</TD> </TR> </TBODY> </TABLE> </BODY> </HTML> Script <script>
(function(){
var d = document,
$ = function(id){return d.getElementById(id)},
ot = $("orderTable"),
hds = ot ? ot.rows[0].getElementsByTagName("td") : "",
tClass = "orderTd",
orderT = function(){
var odb = ot.getElementsByTagName("tbody")[1],
tv = new Array(),
nodb = d.createElement("tbody"),
otype = this.orderType || "desc";
this.orderType = otype == "desc" ? "asc" : "desc";
//取得排序列的文本，序号
for(var i=1, ci; ci=ot.rows[i]; i++){
tv[i-1] = [ci.cells[this.index].innerHTML, i];
}
//排序
if(this.dataType && this.dataType == "num"){
tv.sort(function(a, b){
return otype == "desc" ? +a[0]- +b[0] : +b[0]- +a[0];
})
}else{
tv.sort(function(a, b){
return otype == "desc" ? a[0].localeCompare(b[0]) : b[0].localeCompare(a[0]);
})
}
//创建新的tbody, tr, td
for(var i=0, ci; ci=tv[i]; i++){
var otr = ot.rows[ci[1]];
ot.appendChild(nodb);
ntr = d.createElement("tr");
nodb.appendChild(ntr);
for(var j=0, cj; cj=otr.cells[j]; j++){
ntd = d.createElement("td");
ntd.innerHTML = cj.innerHTML;
ntr.appendChild(ntd);
}
}
//删除旧的tbody
ot.removeChild(odb);
};
//给需要排序的td加上onclick事件
for(var i=0, ci; ci=hds[i]; i++){
ci.index = i;
if(ci.className && ci.className == tClass){
ci.style.cursor = "pointer";
ci.onclick = orderT;
}
}
})()
</script>
希望大家能给之处不足之处 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-03-29
兄弟啊，你就贴了两段代码，想告诉我们什么？学你的代码吗？！如此ctrl+C ，ctrl+V，真不知道是啥意思哦
|
| 返回顶楼 | |
|
发表时间：2010-03-30
提烟而过 写道 兄弟啊，你就贴了两段代码，想告诉我们什么？学你的代码吗？！如此ctrl+C ，ctrl+V，真不知道是啥意思哦
就是想让兄弟给之处我写的代码有什么不好的地方， 
|
| 返回顶楼 | |
|
发表时间：2010-03-30
thuiones 写道 提烟而过 写道 兄弟啊，你就贴了两段代码，想告诉我们什么？学你的代码吗？！如此ctrl+C ，ctrl+V，真不知道是啥意思哦
就是想让兄弟给之处我写的代码有什么不好的地方，
对于这种需求。。。。 可不可以先把数据构造成 数组中有hash的样式 数组排序后 重填入对应的框格中。 别以增删节点来完成排序 |
| 返回顶楼 | |
