javaScript 实现表格排序

最新推荐文章于 2019-05-20 09:56:19 发布

dearwb

最新推荐文章于 2019-05-20 09:56:19 发布

阅读量765

点赞数

文章标签： javascript function button table fun jsf

本文链接：https://blog.csdn.net/dearwb/article/details/1681917

版权

一个利用javascript对表格进行排序的demo，和JSF课程中用DataTable + Comparator排序的原理差不多，当然是完全在客户端实现的，贴出来供大家参考.

<body>
<table border id="tbl" width="40%">
<thead>
<tr>
     <th><input type="button" value="姓名" οnclick="sort_onclick(sortByName)" /></th>
     <th><input type="button" value="年龄" οnclick="sort_onclick(sortByAge)" /></th>
     <th>编号</th>
    </tr>
</thead>
<tbody>
<tr><td>tom</td><td>12</td><td>1</td></tr>
<tr>
<td>jerry</td><td>9</td><td>2</td></tr>
<tr>
<td>alice</td><td>15</td><td>3</td></tr>
<tr>
<td>john</td><td>18</td><td>4</td></tr>
<tr>
<td>green</td><td>1</td><td>5</td></tr>
</tbody>
</table>

var tbl = document.getElementById("tbl");
var ds = new Array();

function sortByAge(tr1, tr2) {
var age1 = Number(tr1.cells[1].innerHTML);
var age2 = Number(tr2.cells[1].innerHTML);
return age1>age2?1:-1
}

function sortByName(tr1, tr2) {
var name1 = tr1.cells[0].innerHTML;
var name2 = tr2.cells[0].innerHTML;
return name1>name2?1:-1;
}

function sort_onclick(fun) {
ds.sort(fun);
for (var i=0; i<ds.length; i++) {
//因为TABLE的第二个元素才是TBODY，所以需要用tbl.childNodes[1]来引用TBODY
tbl.childNodes[1].appendChild(ds[i]);
}
}

window.οnlοad=function(){
//将TABLE中的每一行（除了标题行）转换成为数组
var rows = tbl.rows;
for (var i=1; i<rows.length; i++) {
ds[i-1] = rows[i];
}
}
</script>
</body>