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 相关文章推荐
重定向实现代码
Nov 20 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
纯js实现倒计时功能
Jan 06 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
js实现点赞效果
Mar 16 Javascript
原生js实现弹幕效果
Nov 29 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/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python实现的选择排序算法示例
2017/11/29 Python
python获取url的返回信息方法
2018/12/17 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Python创建临时文件和文件夹
2020/08/05 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
十佳大学生事迹材料
2014/01/29 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
Mysql 用户权限管理实现
2021/05/25 MySQL