table排序:先用sort对tbody中的tr进行排序,然后用appendChild将每个tr按排好的顺序插入到父节点中;
appendChild:此时分两步操作:1,先将tr从原父元素中删除,2再将tr插入到父元素末尾;
sort:是数组的方法;arr.sort;而通过oTab.tBodies[0].rows获取的是tr元素集合;元素集合只有length.这个类似数组的属性,但无sort,splice等数组的方法;因此要讲元素集合转换成数组,方法如下:
var arr=[];//定义一个空数组;
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i];//遍历将每一个tr添加到arr中;
}
比较函数:
sort();方法接受比较函数:一般数组中装的是哪类,比较的参数就该写哪类;如:arr[]中是tr.那么,比较函数中function(tr1,tr2)参数也是tr1,tr2;
比较tr行第一个单元格中的序号:
function tNum(tr1,tr2){
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=paresInt(tr2.cells[0].innerHTML);
return n1-n2;
}
例子:重拍table中混乱的行;
html:
<body> <input id='btn1' type='button' value='排序'/> <table id='tab1' border='1px solid black' width='280px'> <thead> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>2</td> <td>浩二</td> <td>24</td> <td></td> </tr> <tr> <td>1</td> <td>刘一</td> <td>23</td> <td></td> </tr> <tr> <td>6</td> <td>张四</td> <td>27</td> <td></td> </tr> <tr> <td>4</td> <td>麻四</td> <td>23</td> <td></td> </tr> <tr> <td>5</td> <td>王五</td> <td>29</td> <td></td> </tr> <tr> <td>3</td> <td>张三</td> <td>26</td> <td></td> </tr> </tbody> </table> </body>
javascript代码:
<script> window.onload=function(){ var oTab=document.getElementById('tab1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function(){ var aTr=oTab.tBodies[0].rows; //创建集合tr元素集的数组; var arr=[]; for(var i=0;i<aTr.length;i++){ arr[i]=aTr[i]; } //实现数组内部从小到大的排序; arr.sort(function(tr1,tr2){ var n1=parseInt(tr1.cells[0].innerHTML); var n2=parseInt(tr2.cells[0].innerHTML); return n1-n2; }); //alert(arr[1].cells[0].innerHTML); //按从小到大的顺序依次插入父元素;appendChild,1,先把元素从父元素删除,2,再添加到父元素; for(var i=0;i<arr.length;i++){ oTab.tBodies[0].appendChild(arr[i]); } } } </script>