[JavaScript]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 隐藏列的方式,都是采用这样的代码。
实际上,我们可以用设置第一行的 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>

 

重新测试,我们发现,隐藏千行表格的某列,只需要不到 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 列'>
&nbsp;&nbsp;
<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>

 

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏