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

核心提示： 遗憾的是，我们 google 出来的用 javascript 隐藏列的方式，javascript 极速：隐藏/显示万行表格列只需 60毫秒(2)，都是采用这样的代码，实际上，但对 colgroup 进行处理的时间达到了 140毫秒，即延长了一倍，我们可以用设置第一行的 td 或 th 的宽

遗憾的是，我们 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 样式为如下：

<style>
table
{
　　　 border-collapse:collapse;
　　　 table-layout:fixed;
　　　 overflow:hidden;
}
td
{
　　　 overflow:hidden;
　　　 white-space: nowrap;
}
</style>

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

补充：

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