隐藏表格列,最常见的是如下方式:
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>