表格的排序

　　对于表格内容根据每行中的ID值进行升序排列，实现原本错乱无序的表格按照ID进行重新规则化排序。

初始HTML代码

<!doctype html>
<html>
<head>
<title>表格排序</title>
<meta charset="utf-8">
<style>
html{font-family:楷体;}
</style>
</head>
<body>
<input id='btn1' type='button' value='排序'/>
<table id='tab1'  border="1" width="500" >
    <thead>
        <tr><td>ID</td><td>姓名</td><td>年龄</td></tr>
    </thead>
    <tbody>
        <tr><td>6</td><td>JavaScript权威指南</td><td>28</td></tr>
        <tr><td>2</td><td>机器猫</td><td>44</td></tr>
         <tr><td>1</td><td>阿童木</td><td>30</td></tr>
        <tr><td>3</td><td>小叮当</td><td>53</td></tr>
        <tr><td>5</td><td>祖鲁</td><td>27</td></tr>
        <tr><td>4</td><td>海雅</td><td>69</td></tr>
    </tbody>
</table>
</body>
</html>

　　思路：转换、排序、插入。将元素集合转换为数组，通过sort()函数进行排序，appendChild进行插入。

window.onload=function()
{
    var oTab=document.getElementById('tab1');
    var oBtn=document.getElementById('btn1');
    var aTr=oTab.tBodies[0].rows;
    //将元素集合aTr转换为数组arr
    var arr=[];
    for(var i=0;i<aTr.length;i++)
    {
        arr[i]=aTr[i];    
    }
    //对arr数组进行排序
    arr.sort(function compare(tr1,tr2)
    {
        var n1=parseInt(tr1.cells[0].innerHTML);
        var n2=parseInt(tr2.cells[0].innerHTML);
        return n1-n2;
    })
    oBtn.onclick=function()
    { 
        for(var i=0;i<aTr.length;i++)
        {            
         oTab.tBodies[0].appendChild(arr[i]);
        }
    }
   
};

　　出现问题：1、sort()函数的具体功能了解不详细;2、元素集合和数组的区别提现在哪些方面?

猜你喜欢