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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
JavaScript实现前端倒计时效果
Feb 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
python字符串替换示例
2014/04/24 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
浅谈Python 参数与变量
2020/06/20 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
长青弘远的面试题
2012/06/09 面试题
竞聘自述材料
2014/08/25 职场文书
生产设备维护保养制度
2015/08/06 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
Python内置数据类型中的集合详解
2022/03/18 Python