javascript 極速隱藏/顯示萬行表格列只需 60毫秒

更新時間：2009年03月28日 00:20:41 作者：

隱藏表格列這種方式的效率極低。例如，隱藏一個千行表格的某列，在我的筆記本（P4 M 1.4G，768M內(nèi)存）上執(zhí)行需要約 4000毫秒的時間，令人無法忍受。

隱藏表格列，最常見的是如下方式：

復(fù)制代碼代碼如下:

td.style.display = "none";

這種方式的效率極低。例如，隱藏一個千行表格的某列，在我的筆記本（P4 M 1.4G，768M內(nèi)存）上執(zhí)行需要約 4000毫秒的時間，令人無法忍受。例如如下代碼：

復(fù)制代碼代碼如下:

<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"><!-- 
//-------------------------------------------------------- 
// 時間轉(zhuǎn)為時間戳（毫秒） 
function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();} 

//-------------------------------------------------------- 
// 創(chuàng)建表格 
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() 方式快速構(gòu)建字串，速度極快 
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); // 創(chuàng)建千行表格 
// --></script> 

遺憾的是，我們 google 出來的用 javascript 隱藏列的方式，都是采用這樣的代碼。
實際上，我們可以用設(shè)置第一行的 td 或 th 的寬度為 0 的方式，來快速隱藏列。
我們把 hideOrShowCol() 函數(shù)改為如下代碼：

復(fù)制代碼代碼如下:

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) + " 毫秒"); 
}

不過，僅這樣還達不到隱藏的效果，還需要設(shè)置 table 和 td 樣式為如下：

復(fù)制代碼代碼如下:

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

重新測試，我們發(fā)現(xiàn)，隱藏千行表格的某列，只需要不到 15毫秒的時間。而即使用 createTable(10000) 創(chuàng)建萬行表格，再來測試，也只需要 60 毫秒的時間（都是以我的筆記本上的執(zhí)行時間為參照。實際上，你們大多數(shù)人的電腦配置都比我的筆記本高很多，因此時間會更短），效率十分令人滿意。
補充：
根據(jù) 無常網(wǎng)友的提議，加上了對 colgroup 處理的代碼。奇怪的是，雖然處理原理完全一樣，但對 colgroup 進行處理的時間達到了 140毫秒，即延長了一倍。尚不清楚原因。
完整代碼：

復(fù)制代碼代碼如下:

<style><!-- 
table 
{ 
border-collapse:collapse; 
table-layout:fixed; 
overflow:hidden; 
} 
td 
{ 
overflow:hidden; 
white-space: nowrap; 
} 
--></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='創(chuàng)建表格：使用 thead'> 
<input type=button onclick=createTable(1) value='創(chuàng)建表格：使用 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"><!-- 
var tableRowsLen = 10000; // 創(chuàng)建萬行表格 

//-------------------------------------------------------- 
// 時間轉(zhuǎn)為時間戳（毫秒） 
function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();} 

//-------------------------------------------------------- 
// 創(chuàng)建表格 
function createTable(isUseColGroup) 
{ 
if (isUseColGroup) // 使用 colgroup 標(biāo)簽 
{ 
var str = "<table border=1>" + 
"<colgroup>" + 
"<col width=100 />" + 
"<col width=200 />" + 
"<col width=50 />" + 
"<\/colgroup>" + 
"<tbody>"; 
} 
else 
{ 
// 使用 thead 標(biāo)簽 
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() 方式快速構(gòu)建字串，速度極快 
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 行以上的表格操作，這將非常耗時（甚至導(dǎo)致瀏覽器死掉）。\n您確定要繼續(xù)嗎？")) 
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 標(biāo)簽，則 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>