javascript极速隐藏或显示万行表格列的代码

发布时间:2019-12-21编辑:脚本学堂
如何用javascript快速地显示或隐藏超过万行的表格列,乖乖,真厉害,有兴趣的朋友,参考下本文中介绍的方法吧,不看后悔哦。

隐藏表格列,最常见的是如下方式:
 

复制代码 代码示例:
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 type="text/javascript"><!--
//--------------------------------------------------------
// 时间转为时间戳(毫秒)
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>

找到的 javascript 隐藏列的方式,多是采用这样的代码。
可以用设置第一行的 td 或 th 的宽度为 0 的方式,来快速隐藏列。
把 hideOrShowCol() 函数改为:
 

复制代码 代码示例:

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

重新测试,发现隐藏千行表格的某列,只需要不到 15毫秒的时间。