[转]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>
遗憾的是，我们 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>
