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

更新时间：2009年03月28日 00:20:41 作者：

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

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

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 type="text/javascript"><!-- 
//-------------------------------------------------------- 
// 时间转为时间戳（毫秒） 
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 样式为如下：

复制代码代码如下:

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

重新测试，我们发现，隐藏千行表格的某列，只需要不到 15毫秒的时间。而即使用 createTable(10000) 创建万行表格，再来测试，也只需要 60 毫秒的时间（都是以我的笔记本上的执行时间为参照。实际上，你们大多数人的电脑配置都比我的笔记本高很多，因此时间会更短），效率十分令人满意。
补充：
根据无常网友的提议，加上了对 colgroup 处理的代码。奇怪的是，虽然处理原理完全一样，但对 colgroup 进行处理的时间达到了 140毫秒，即延长了一倍。尚不清楚原因。
完整代码：

复制代码代码如下:

<style><!-- 
table 
{ 
border-collapse:collapse; 
table-layout:fixed; 
overflow:hidden; 
} 
td 
{ 
overflow:hidden; 
white-space: nowrap; 
} 
--></style><style bogus="1">table 
{ 
border-collapse:collapse; 
table-layout:fixed; 
overflow:hidden; 
} 
td 
{ 
overflow:hidden; 
white-space: nowrap; 
}</style> 
<body> 
<input type=button onclick=createTable() value='创建表格：使用 thead'> 
<input type=button onclick=createTable(1) value='创建表格：使用 colgroup'> 
<br> 
<input type=button onclick=hideCol(1) value='隐藏第 2 列'> 
<input type=button onclick=showCol(1) value='显示第 2 列'> 

<input type=button onclick=hideCol_fast(1) value='快速隐藏第 2 列'> 
<input type=button onclick=showCol_fast(1) value='快速显示第 2 列'> 
<div id=tableBox></div> 
<script type="text/javascript"><!-- 
var tableRowsLen = 10000; // 创建万行表格 

//-------------------------------------------------------- 
// 时间转为时间戳（毫秒） 
function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();} 

//-------------------------------------------------------- 
// 创建表格 
function createTable(isUseColGroup) 
{ 
if (isUseColGroup) // 使用 colgroup 标签 
{ 
var str = "<table border=1>" + 
"<colgroup>" + 
"<col width=100 />" + 
"<col width=200 />" + 
"<col width=50 />" + 
"<\/colgroup>" + 
"<tbody>"; 
} 
else 
{ 
// 使用 thead 标签 
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<tableRowsLen; 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]; 

if (rowsLen > 1001) 
{ 
if (!confirm("将要对 1000 行以上的表格操作，这将非常耗时（甚至导致浏览器死掉）。\n您确定要继续吗？")) 
return; 
} 

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) + " 毫秒"); 
} 

//-------------------------------------------------------- 
// 隐藏/显示指定列 - 快速 
function hideCol_fast(colIdx){hideOrShowCol_fast(colIdx, 0);} 
function showCol_fast(colIdx){hideOrShowCol_fast(colIdx, 1);} 
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
function hideOrShowCol_fast(colIdx, isShow) 
{ 
var t1 = time2stamp(); // 
var table = tableBox.children[0]; 
var thead = table.children[0]; // 可能是 thead 或者 tbody，也可能是 colgroup 
if (thead.tagName.toLowerCase()=="colgroup") // 对 colgroup 特殊处理 
{ 
var td = thead.children[colIdx]; 
} 
else 
{ 
// 注意：如果表格没有 thead 和 tbody 标签，则 table.children[0] 是 tbody 
var tr = thead.children[0]; 
var td = tr.children[colIdx]; 
} 
td.style.width = isShow ? 200 : 0; 

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

//-------------------------------------------------------- 
createTable(); 
// --></script>

您可能感兴趣的文章:

js TextArea的选中区域处理
js中对于TextArea的选中区域后进行处理的代码，需要的朋友可以参考下。
2010-12-12
JavaScript 通过模式匹配实现重载
昨天rank同学向我提出一个问题，在实际应用中有些接口需要提供类似于函数重载的功能，以方便开发者组织代码逻辑，简化使用者调用。
2010-08-08
利用腾讯的ip地址库做ip物理地址定位
腾讯的这个还是相对比较准确的。因为腾讯每个QQ用户发现自己匹配的地理位置信息不准确都可以提交更正的
2010-07-07
微信小程序实现多文件或者图片上传
这篇文章主要为大家详细介绍了微信小程序实现多文件或者图片上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
解决layUI的页面显示不全的问题
今天小编就为大家分享一篇解决layUI的页面显示不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
基于jquery ajax的多文件上传进度条过程解析
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
利用Bootstrap实现表格复选框checkbox全选
Bootstrap相信应该不用多介绍，来自 Twitter，是目前最受欢迎的前端框架。这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果，文中给出详细的介绍及完整的实例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。
2016-12-12
用户输入密码的强度
用户输入密码的强度...
2006-07-07
JS打印gridview实现原理及代码
打印gridview对于一些童鞋们真的是很陌生啊,不过没有关系，因为本文的出现，或让你茅塞顿开，好了话不多说，感兴趣的朋友可以了解下，或许对你学习js高级知识有所帮助
2013-02-02
详细聊聊TypeScript中unknown与any的区别
unknown类型比较谦虚,就和他本身的意思一样,他从不祸害到其他的变量,但是any类型就是那种恶霸,属于什么都不管,谁也不敢管的类型,这篇文章主要给大家介绍了关于TypeScript中unknown与any区别的相关资料,需要的朋友可以参考下
2021-10-10