JavaScript 表格排序-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_21250/article/details/81754181

本文介绍了一种使用JavaScript实现的表格排序方法，并利用文档片段提高DOM操作效率。该方法通过对表格行进行排序并借助文档片段来批量更新DOM，从而减少浏览器重绘次数，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点学习代码片段的创建：

var fragment = document.createDocumentFragment();

function table_sort(tablename,index){

        // 获取table
        var table = document.getElementById(tablename);

        // 获取table里的tBody
        var tbody = table.tBodies[0];
        // 获取rows
        var rows = tbody.rows;
        var array = new Array();
        // 将row写到数组中,其实写的是指针,都指向tBody中的row
        for (var i = 0;i<rows.length; i++) {
            array[i] = rows[i];
        }
        // 对数组进行排序,只是排指针而已
        array.sort(compareTRs(index));
       
        // 创建一个文档片段
        var fragment = document.createDocumentFragment();
        // 将数据中的row一行行添加到文档片段当中,同时row也被删除
        for (var j = 0; j < array.length; j ++) {
            fragment.appendChild( array[j] );
        }
        // 将文档片段重新加到table中
        table.appendChild(fragment);
    }


        //这里通过一个函数返回另一个函数对象,参考的是精通javascript编程一书中的方式,但在Ubuntu中的Firefox中无法//正常使用
    // 很奇怪这里不进行第二次排序了，如果要写的话应该重写排序函数
    function compareTRs(iCol){
        return function compares(tr1,tr2){
            var oValue1 = tr1.cells[iCol].firstChild.nodeValue;
            var oValue2 = tr2.cells[iCol].firstChild.nodeValue;
            return oValue1.localeCompare(oValue2);
        }
    }