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

隐藏表格列，最常见的是如下方式：复制代码代码如下: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"></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></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></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"></script>

　　推荐阅读

　　ymyang 绘图实例代码

引用方法: 复制代码代码如下:new gov.Graphic(par1,par2,par3); par1 为绘图数据复制代码代码如下:var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据[188,189,1>>>详细阅读

本文标题：javascript 极速隐藏/显示万行表格列只需 60毫秒

地址：http://www.17bianji.com/kaifa2/JS/28884.html

1/2 1

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

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