[JavaScript]javascript 极速：隐藏/显示万行表格列只需 60毫秒-Mikel

隐藏表格列，最常见的是如下方式：

td.style.display = "none";

这种方式的效率极低。例如，隐藏一个千行表格的某列，在我的笔记本（P4 M 1.4G，768M内存）上执行需要约 4000毫秒的时间，令人无法忍受。例如如下代码：

<body>
<input type=button onclick=hideCol(1) value='隐藏第 2 列'>
<input type=button onclick=showCol(1) value='显示第 2 列'>
<div id=tableBox></div>
<script>
//——————————————————–
// 时间转为时间戳（毫秒）
function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();}
//——————————————————–
// 创建表格
function createTable(rowsLen)
{
    var str = "<table border=1>" +
                "<thead>" +
                    "<tr>" +
                        "<th width=100>col1<\/th>" +
                        "<th width=200>col2<\/th>" +
                        "<th width=50>col3<\/th>" +
                    "<\/tr>" +
                "<\/thead>" +
                "<tbody>";
    var arr = [];
    for (var i=0; i<rowsLen; i++)
    {
        arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>";
    }
    str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串，速度极快
    tableBox.innerHTML = str; // 生成 table
}
//——————————————————–
// 隐藏/显示指定列
function hideCol(colIdx){hideOrShowCol(colIdx, 0);}
function showCol(colIdx){hideOrShowCol(colIdx, 1);}
// – – – – – – – – – – – – – – – – – – – – – – – – – – – –
function hideOrShowCol(colIdx, isShow)
{
    var t1 = time2stamp(); //
    var table = tableBox.children[0];
    var rowsLen = table.rows.length;
    var lastTr = table.rows[0];
    for (var i=0; i<rowsLen; i++)
    {
        var tr = table.rows[i];
        tr.children[colIdx].style.display = isShow ? "" : "none";
    }

    var t2 = time2stamp();
    alert("耗时：" + (t2 – t1) + " 毫秒");
}
//——————————————————–
createTable(1000); // 创建千行表格

</script>

遗憾的是，我们 google 出来的用 JavaScript 隐藏列的方式，都是采用这样的代码。
实际上，我们可以用设置第一行的 td 或 th 的宽度为 0 的方式，来快速隐藏列。
我们把 hideOrShowCol() 函数改为如下代码：

function hideOrShowCol(colIdx, isShow)
{
    var t1 = time2stamp(); //
    var table = tableBox.children[0];
    var tr = table.rows[0];
    tr.children[colIdx].style.width = isShow ? 200 : 0;

    var t2 = time2stamp();
    alert("耗时：" + (t2 – t1) + " 毫秒");
}

不过，仅这样还达不到隐藏的效果，还需要设置 table 和 td 样式为如下：

重新测试，我们发现，隐藏千行表格的某列，只需要不到 15毫秒的时间。而即使用 createTable(10000) 创建万行表格，再来测试，也只需要 60 毫秒的时间（都是以我的笔记本上的执行时间为参照。实际上，你们大多数人的电脑配置都比我的笔记本高很多，因此时间会更短），效率十分令人满意。

补充：

根据无常网友的提议，加上了对 colgroup 处理的代码。奇怪的是，虽然处理原理完全一样，但对 colgroup 进行处理的时间达到了 140毫秒，即延长了一倍。尚不清楚原因。

完整代码：

[JavaScript]javascript 极速：隐藏/显示万行表格列只需 60毫秒

相关推荐

热门标签

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏