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> //-------------------------------------------------------- // 时间转为时间戳（毫秒） function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();} //-------------------------------------------------------- // 创建表格 function createTable(rowsLen) { 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>"; var arr = []; for (var i=0; i<rowsLen; i++) { arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>"; } str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串，速度极快 tableBox.innerHTML = str; // 生成 table } //-------------------------------------------------------- // 隐藏/显示指定列 function hideCol(colIdx){hideOrShowCol(colIdx, 0);} function showCol(colIdx){hideOrShowCol(colIdx, 1);} // - - - - - - - - - - - - - - - - - - - - - - - - - - - - function hideOrShowCol(colIdx, isShow) { var t1 = time2stamp(); // var table = tableBox.children[0]; var rowsLen = table.rows.length; var lastTr = table.rows[0]; for (var i=0; i<rowsLen; i++) { var tr = table.rows[i]; tr.children[colIdx].style.display = isShow ? "" : "none"; } var t2 = time2stamp(); alert("耗时：" + (t2 - t1) + " 毫秒"); } //-------------------------------------------------------- createTable(1000); // 创建千行表格 </script>
遗憾的是，我们 google 出来的用 javascript 隐藏列的方式，都是采用这样的代码。
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>
table { border-collapse:collapse; table-layout:fixed; overflow:hidden; } td { overflow:hidden; white-space: nowrap; } </style>
重新测试，我们发现，隐藏千行表格的某列，只需要不到 15毫秒的时间。而即使用 createTable(10000) 创建万行表格，再来测试，也只需要 60 毫秒的时间（都是以我的笔记本上的执行时间为参照。实际上，你们大多数人的电脑配置都比我的笔记本高很多，因此时间会更短），效率十分令人满意。 补充： 根据 无常 网友的提议，加上了对 colgroup 处理的代码。奇怪的是，虽然处理原理完全一样，但对 colgroup 进行处理的时间达到了 140毫秒，即延长了一倍。尚不清楚原因。 完整代码：  <style> 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> var tableRowsLen = 10000; // 创建万行表格 //-------------------------------------------------------- // 时间转为时间戳（毫秒） function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();} //-------------------------------------------------------- // 创建表格 function createTable(isUseColGroup) { if (isUseColGroup) // 使用 colgroup 标签 { var str = "<table border=1>" + "<colgroup>" + "<col width=100 />" + "<col width=200 />" + "<col width=50 />" + "<\/colgroup>" + "<tbody>"; } else { // 使用 thead 标签 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>"; } var arr = []; for (var i=0; i<tableRowsLen; i++) { arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>"; } str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串，速度极快 tableBox.innerHTML = str; // 生成 table } //-------------------------------------------------------- // 隐藏/显示指定列 function hideCol(colIdx){hideOrShowCol(colIdx, 0);} function showCol(colIdx){hideOrShowCol(colIdx, 1);} // - - - - - - - - - - - - - - - - - - - - - - - - - - - - function hideOrShowCol(colIdx, isShow) { var t1 = time2stamp(); // var table = tableBox.children[0]; var rowsLen = table.rows.length; var lastTr = table.rows[0]; if (rowsLen > 1001) { if (!confirm("将要对 1000 行以上的表格操作，这将非常耗时（甚至导致浏览器死掉）。\n您确定要继续吗？")) return; } for (var i=0; i<rowsLen; i++) { var tr = table.rows[i]; tr.children[colIdx].style.display = isShow ? "" : "none"; } var t2 = time2stamp(); alert("耗时：" + (t2 - t1) + " 毫秒"); } //-------------------------------------------------------- // 隐藏/显示指定列 - 快速 function hideCol_fast(colIdx){hideOrShowCol_fast(colIdx, 0);} function showCol_fast(colIdx){hideOrShowCol_fast(colIdx, 1);} // - - - - - - - - - - - - - - - - - - - - - - - - - - - - function hideOrShowCol_fast(colIdx, isShow) { var t1 = time2stamp(); // var table = tableBox.children[0]; var thead = table.children[0]; // 可能是 thead 或者 tbody，也可能是 colgroup if (thead.tagName.toLowerCase()=="colgroup") // 对 colgroup 特殊处理 { var td = thead.children[colIdx]; } else { // 注意：如果表格没有 thead 和 tbody 标签，则 table.children[0] 是 tbody var tr = thead.children[0]; var td = tr.children[colIdx]; } td.style.width = isShow ? 200 : 0; var t2 = time2stamp(); alert("耗时：" + (t2 - t1) + " 毫秒"); } //-------------------------------------------------------- createTable(); </script> |
