[转]javascript 快速隐藏/显示万行表格列的方法

原文地址:javascript 快速隐藏/显示万行表格列的方法

隐藏表格列,最常见的是如下方式:

td.style.display = "none";

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

 1 <body>   
 2 <input type=button onclick=hideCol(1) value='隐藏第 2 列'>   
 3 <input type=button onclick=showCol(1) value='显示第 2 列'>   
 4 <div id=tableBox></div>   
 5 <script>     
 6 //--------------------------------------------------------   
 7 // 时间转为时间戳(毫秒)   
 8 function time2stamp() {
 9     var d = new Date();
10     return Date.parse(d) + d.getMilliseconds();
11 }
12 //--------------------------------------------------------   
13 // 创建表格   
14 function createTable(rowsLen) {
15     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>";
16 
17     var arr = [];
18     for (var i = 0; i < rowsLen; i++) {
19         arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>";
20     }
21     str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串,速度极快   
22     tableBox.innerHTML = str; // 生成 table   
23 }
24 //--------------------------------------------------------   
25 // 隐藏/显示指定列   
26 function hideCol(colIdx) {
27     hideOrShowCol(colIdx, 0);
28 }
29 function showCol(colIdx) {
30     hideOrShowCol(colIdx, 1);
31 }
32 // - - - - - - - - - - - - - - - - - - - - - - - - - - - -   
33 function hideOrShowCol(colIdx, isShow) {
34     var t1 = time2stamp(); //    
35     var table = tableBox.children[0];
36     var rowsLen = table.rows.length;
37     var lastTr = table.rows[0];
38     for (var i = 0; i < rowsLen; i++) {
39         var tr = table.rows[i];
40         tr.children[colIdx].style.display = isShow ? "": "none";
41     }
42 
43     var t2 = time2stamp();
44     alert("耗时:" + (t2 - t1) + " 毫秒");
45 }
46 
47 //--------------------------------------------------------   
48 createTable(1000); // 创建千行表格   
49 </script>  
View Code

遗憾的是,我们 google 出来的用 javascript 隐藏列的方式,都是采用这样的代码。

实际上,我们可以用设置第一行的 td 或 th 的宽度为 0 的方式,来快速隐藏列。
我们把 hideOrShowCol() 函数改为如下代码:

1 function hideOrShowCol(colIdx, isShow) {
2     var t1 = time2stamp(); // 
3     var table = tableBox.children[0];
4     var tr = table.rows[0];
5     tr.children[colIdx].style.width = isShow ? 200 : 0;
6 
7     var t2 = time2stamp();
8     alert("耗时:" + (t2 - t1) + " 毫秒");
9 }

不过,仅这样还达不到隐藏的效果,还需要设置 table 和 td 样式为如下:

<style>
    table { border-collapse:collapse; table-layout:fixed; overflow:hidden;} 
    td { overflow:hidden; white-space: nowrap; }
</style>

重新测试,我们发现,隐藏千行表格的某列,只需要不到 15毫秒的时间。而即使用 createTable(10000) 创建万行表格,再来测试,也只需要 60 毫秒的时间(都是以我的笔记本上的执行时间为参照。实际上,你们大多数人的电脑配置都比我的笔记本高很多,因此时间会更短),效率十分令人满意。

补充:
根据 无常 网友的提议,加上了对 colgroup 处理的代码。奇怪的是,虽然处理原理完全一样,但对 colgroup 进行处理的时间达到了 140毫秒,即延长了一倍。尚不清楚原因。
完整代码:

  1 <style>
  2     table { border-collapse:collapse; table-layout:fixed; overflow:hidden;} 
  3     td { overflow:hidden; white-space: nowrap; }
  4 </style>
  5 <body>
  6     <input type=button onclick=createTable() value='创建表格:使用 thead'>
  7     <input type=button onclick=createTable(1) value='创建表格:使用 colgroup'>
  8     <br>
  9     <input type=button onclick=hideCol(1) value='隐藏第 2 列'>
 10     <input type=button onclick=showCol(1) value='显示第 2 列'>
 11     <input type=button onclick=hideCol_fast(1) value='快速隐藏第 2 列'>
 12     <input type=button onclick=showCol_fast(1) value='快速显示第 2 列'>
 13     <div id=tableBox>
 14     </div>
 15     <script>
 16         var tableRowsLen = 10000; // 创建万行表格 
 17         //-------------------------------------------------------- 
 18         // 时间转为时间戳(毫秒) 
 19         function time2stamp() {
 20             var d = new Date();
 21             return Date.parse(d) + d.getMilliseconds();
 22         }
 23 
 24         //-------------------------------------------------------- 
 25         // 创建表格 
 26         function createTable(isUseColGroup) {
 27             if (isUseColGroup) // 使用 colgroup 标签 
 28             {
 29                 var str = "<table border=1>" + "<colgroup>" + "<col width=100 />" + "<col width=200 />" + "<col width=50 />" + "<\/colgroup>" + "<tbody>";
 30             }
 31             else {
 32                 // 使用 thead 标签 
 33                 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>";
 34             }
 35 
 36             var arr = [];
 37             for (var i = 0; i < tableRowsLen; i++) {
 38                 arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>";
 39             }
 40             str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串,速度极快 
 41             tableBox.innerHTML = str; // 生成 table 
 42         }
 43 
 44         //-------------------------------------------------------- 
 45         // 隐藏/显示指定列 
 46         function hideCol(colIdx) {
 47             hideOrShowCol(colIdx, 0);
 48         }
 49         function showCol(colIdx) {
 50             hideOrShowCol(colIdx, 1);
 51         }
 52         // - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 53         function hideOrShowCol(colIdx, isShow) {
 54             var t1 = time2stamp(); // 
 55             var table = tableBox.children[0];
 56             var rowsLen = table.rows.length;
 57             var lastTr = table.rows[0];
 58 
 59             if (rowsLen > 1001) {
 60                 if (!confirm("将要对 1000 行以上的表格操作,这将非常耗时(甚至导致浏览器死掉)。\n您确定要继续吗?")) return;
 61             }
 62 
 63             for (var i = 0; i < rowsLen; i++) {
 64                 var tr = table.rows[i];
 65                 tr.children[colIdx].style.display = isShow ? "": "none";
 66             }
 67 
 68             var t2 = time2stamp();
 69             alert("耗时:" + (t2 - t1) + " 毫秒");
 70         }
 71 
 72         //-------------------------------------------------------- 
 73         // 隐藏/显示指定列 - 快速 
 74         function hideCol_fast(colIdx) {
 75             hideOrShowCol_fast(colIdx, 0);
 76         }
 77         function showCol_fast(colIdx) {
 78             hideOrShowCol_fast(colIdx, 1);
 79         }
 80         // - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 81         function hideOrShowCol_fast(colIdx, isShow) {
 82             var t1 = time2stamp(); // 
 83             var table = tableBox.children[0];
 84             var thead = table.children[0]; // 可能是 thead 或者 tbody,也可能是 colgroup 
 85             if (thead.tagName.toLowerCase() == "colgroup") // 对 colgroup 特殊处理 
 86             {
 87                 var td = thead.children[colIdx];
 88             }
 89             else {
 90                 // 注意:如果表格没有 thead 和 tbody 标签,则 table.children[0] 是 tbody 
 91                 var tr = thead.children[0];
 92                 var td = tr.children[colIdx];
 93             }
 94             td.style.width = isShow ? 200 : 0;
 95 
 96             var t2 = time2stamp();
 97             alert("耗时:" + (t2 - t1) + " 毫秒");
 98         }
 99 
100         //-------------------------------------------------------- 
101         createTable();
102     </script>

 

posted on 2014-03-28 11:24  relax  阅读(1129)  评论(0编辑  收藏  举报