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 scrollTop正解使用方法
Nov 14 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 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 url地址栏传中文乱码解决方法集合
2010/06/25 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
python更新列表的方法
2015/07/28 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
写给妈妈的道歉信
2014/01/11 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
新郎结婚保证书
2015/02/26 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题