JavaScript表格排序()转

2024-04-27 14:04:13

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>javaScript表格排序</title>
</head>
<body>
    <table style="width: 151px" id="t1">
        <tr>
            <td style="cursor:pointer">
                标题1</td>
              <td>
                标题2</td>
            <td>
                标题3</td>
        </tr>
        <tr>
            <td>
                a</td>
            <td>
                3</td>
            <td>
                d</td>
        </tr>
        <tr>
            <td>
                b</td>
            <td>
                2</td>
            <td>
                c</td>
        </tr>
        <tr>
            <td>
                c</td>
            <td>
                1</td>
            <td>
                a</td>
        </tr>
   </table>
    <script>
    enableTableSort("t1");
    function enableTableSort(id)
    {
       var mytable=document.getElementById(id);

       for(var i=0;i<mytable.rows[0].cells.length;i++)
       {
       mytable.rows[0].cells[i].onclick=sortTable(id,i);
       mytable.rows[0].cells[i].style.cursor="pointer";
       mytable.rows[0].cells[i].style.background="#f0f000";
       }



     function sortrow(cellIndex,sortDirection)
            {
                return function(row1,row2)
                {
                    var value1= row1.cells[cellIndex].firstChild.nodeValue
                    var value2= row2.cells[cellIndex].firstChild.nodeValue
                    if(value1>value2)
                    {
                    return sortDirection
                    }
                    else if(value1<value2)
                    {
                    return sortDirection;
                    }
                    else return 0;
                }
            }

        function sortTable(id,cellIndex)
        {
            return function()
            {
                var mytable=document.getElementById(id);
                var tbody=mytable.tBodies[0];
                var trows=tbody.rows;
                var sortDirection=mytable.getAttribute("sortDirection")?mytable.getAttribute("sortDirection"):1;
                var arows=[];



                for(var i=1;i<trows.length;i++)
                arows.push(trows[i]);

                mytable.setAttribute("sortDirection",sortDirection?-1:1)

arows.sort(sortrow(cellIndex,sortDirection));

                var docFragment=document.createDocumentFragment();

                for(var i=0;i<arows.length;i++)
                {
                docFragment.appendChild(arows[i]);
                }

                tbody.appendChild(docFragment);



            }
        }

}

</script>
</body>
</html>

上一篇：javascript 动态创建表格：新增、删除行和单元格

下一篇：js日历控件（可精确到分钟）