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


Posted in Javascript onMarch 28, 2009

隐藏表格列,最常见的是如下方式:

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>
Javascript 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
vue增加强缓存和版本号的实现方法
May 01 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
一个tab标签切换效果代码
Mar 27 #Javascript
js onpropertychange输入框 事件获取属性
Mar 26 #Javascript
input 高级限制级用法
Mar 26 #Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 #Javascript
JS 常用校验函数
Mar 26 #Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 #Javascript
js GridView 实现自动计算操作代码
Mar 25 #Javascript
You might like
扩展你的 PHP 之入门篇
2006/12/04 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
学习python (1)
2006/10/31 Python
Python中的迭代器漫谈
2015/02/03 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
python中温度单位转换的实例方法
2020/12/27 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
高一地理教学工作总结
2015/08/12 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android