栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

隐藏表格列,最常见的是如下方式:
复制代码 代码如下:
td.style.display = "none";

这种方式的效率极低。例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受。例如如下代码:
复制代码 代码如下:







遗憾的是,我们 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 样式为如下:
复制代码 代码如下:
table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}

重新测试,我们发现,隐藏千行表格的某列,只需要不到 15毫秒的时间。而即使用 createTable(10000) 创建万行表格,再来测试,也只需要 60 毫秒的时间(都是以我的笔记本上的执行时间为参照。实际上,你们大多数人的电脑配置都比我的笔记本高很多,因此时间会更短),效率十分令人满意。
补充:
根据 无常 网友的提议,加上了对 colgroup 处理的代码。奇怪的是,虽然处理原理完全一样,但对 colgroup 进行处理的时间达到了 140毫秒,即延长了一倍。尚不清楚原因。
完整代码:
复制代码 代码如下:
table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}












转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/118513.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号