JavaScript 表格排序

最新推荐文章于 2025-09-30 09:22:21 发布

原创最新推荐文章于 2025-09-30 09:22:21 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Ubuntu #编程 #Firefox #J# #ViewUI

Util 专栏收录该内容

16 篇文章

订阅专栏

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

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

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);
        }
    }