javascript 极速：隐藏/显示万行表格列只需 60毫秒
2010-09-14 13:43:14 来源：WEB开发网隐藏表格列，最常见的是如下方式：
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>
Tags：javascript 隐藏 显示
编辑录入：爽爽 [复制链接] [打 印]
- 好的评价 如果觉得好，就请您
0%(0) 
- 差的评价 如果觉得差，就请您
0%(0) 
中查找“javascript 极速：隐藏/显示万行表格列只需 60毫秒”更多相关内容
中查找“javascript 极速：隐藏/显示万行表格列只需 60毫秒”更多相关内容更多精彩
赞助商链接