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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
JS数组的高级使用方法示例小结
Mar 14 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中的按位与和按位或操作示例
2014/01/27 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
设定php简写功能的方法
2019/11/28 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
详解Vite的新体验
2021/02/22 Javascript
python json.loads兼容单引号数据的方法
2018/12/19 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
努力学习保证书
2015/02/26 职场文书
法律进社区活动总结
2015/05/07 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
Django实现聊天机器人
2021/05/31 Python
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA