提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript极速隐藏/显示万行表格列只需60毫秒

JavaScript 显示 表格 极速 隐藏 60 毫秒 万行
2023-06-13 09:14:08 时间
隐藏表格列，最常见的是如下方式：
复制代码代码如下:

td.style.display="none";

这种方式的效率极低。例如，隐藏一个千行表格的某列，在我的笔记本（P4M1.4G，768M内存）上执行需要约4000毫秒的时间，令人无法忍受。例如如下代码：
复制代码代码如下:

<body>
<inputtype=buttononclick=hideCol(1)value="隐藏第2列">
<inputtype=buttononclick=showCol(1)value="显示第2列">
<divid=tableBox></div>
<scripttype="text/javascript"><!--
//--------------------------------------------------------
//时间转为时间戳（毫秒）
functiontime2stamp(){vard=newDate();returnDate.parse(d)+d.getMilliseconds();}

//--------------------------------------------------------
//创建表格
functioncreateTable(rowsLen)
{
varstr="<tableborder=1>"+
"<thead>"+
"<tr>"+
"<thwidth=100>col1<\/th>"+
"<thwidth=200>col2<\/th>"+
"<thwidth=50>col3<\/th>"+
"<\/tr>"+
"<\/thead>"+
"<tbody>";

vararr=[];
for(vari=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
}

//--------------------------------------------------------
//隐藏/显示指定列
functionhideCol(colIdx){hideOrShowCol(colIdx,0);}
functionshowCol(colIdx){hideOrShowCol(colIdx,1);}
//----------------------------
functionhideOrShowCol(colIdx,isShow)
{
vart1=time2stamp();//
vartable=tableBox.children[0];
varrowsLen=table.rows.length;
varlastTr=table.rows[0];
for(vari=0;i<rowsLen;i++)
{
vartr=table.rows[i];
tr.children[colIdx].style.display=isShow?"":"none";
}

vart2=time2stamp();
alert("耗时："+(t2-t1)+"毫秒");
}

//--------------------------------------------------------
createTable(1000);//创建千行表格
//--></script>


遗憾的是，我们google出来的用javascript隐藏列的方式，都是采用这样的代码。
实际上，我们可以用设置第一行的td或th的宽度为0的方式，来快速隐藏列。
我们把hideOrShowCol()函数改为如下代码：
复制代码代码如下:
functionhideOrShowCol(colIdx,isShow)
{
vart1=time2stamp();//
vartable=tableBox.children[0];
vartr=table.rows[0];
tr.children[colIdx].style.width=isShow?200:0;

vart2=time2stamp();
alert("耗时："+(t2-t1)+"毫秒");
}

不过，仅这样还达不到隐藏的效果，还需要设置table和td样式为如下：
复制代码代码如下:
<style><!--
table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space:nowrap;
}
--></style><stylebogus="1">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><stylebogus="1">table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space:nowrap;
}</style>
<body>
<inputtype=buttononclick=createTable()value="创建表格：使用thead">
<inputtype=buttononclick=createTable(1)value="创建表格：使用colgroup">
<br>
<inputtype=buttononclick=hideCol(1)value="隐藏第2列">
<inputtype=buttononclick=showCol(1)value="显示第2列">

<inputtype=buttononclick=hideCol_fast(1)value="快速隐藏第2列">
<inputtype=buttononclick=showCol_fast(1)value="快速显示第2列">
<divid=tableBox></div>
<scripttype="text/javascript"><!--
vartableRowsLen=10000;//创建万行表格

//--------------------------------------------------------
//时间转为时间戳（毫秒）
functiontime2stamp(){vard=newDate();returnDate.parse(d)+d.getMilliseconds();}

//--------------------------------------------------------
//创建表格
functioncreateTable(isUseColGroup)
{
if(isUseColGroup)//使用colgroup标签
{
varstr="<tableborder=1>"+
"<colgroup>"+
"<colwidth=100/>"+
"<colwidth=200/>"+
"<colwidth=50/>"+
"<\/colgroup>"+
"<tbody>";
}
else
{
//使用thead标签
varstr="<tableborder=1>"+
"<thead>"+
"<tr>"+
"<thwidth=100>col1<\/th>"+
"<thwidth=200>col2<\/th>"+
"<thwidth=50>col3<\/th>"+
"<\/tr>"+
"<\/thead>"+
"<tbody>";
}

vararr=[];
for(vari=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
}

//--------------------------------------------------------
//隐藏/显示指定列
functionhideCol(colIdx){hideOrShowCol(colIdx,0);}
functionshowCol(colIdx){hideOrShowCol(colIdx,1);}
//----------------------------
functionhideOrShowCol(colIdx,isShow)
{
vart1=time2stamp();//
vartable=tableBox.children[0];
varrowsLen=table.rows.length;
varlastTr=table.rows[0];

if(rowsLen>1001)
{
if(!confirm("将要对1000行以上的表格操作，这将非常耗时（甚至导致浏览器死掉）。\n您确定要继续吗？"))
return;
}

for(vari=0;i<rowsLen;i++)
{
vartr=table.rows[i];
tr.children[colIdx].style.display=isShow?"":"none";
}

vart2=time2stamp();
alert("耗时："+(t2-t1)+"毫秒");
}

//--------------------------------------------------------
//隐藏/显示指定列-快速
functionhideCol_fast(colIdx){hideOrShowCol_fast(colIdx,0);}
functionshowCol_fast(colIdx){hideOrShowCol_fast(colIdx,1);}
//----------------------------
functionhideOrShowCol_fast(colIdx,isShow)
{
vart1=time2stamp();//
vartable=tableBox.children[0];
varthead=table.children[0];//可能是thead或者tbody，也可能是colgroup
if(thead.tagName.toLowerCase()=="colgroup")//对colgroup特殊处理
{
vartd=thead.children[colIdx];
}
else
{
//注意：如果表格没有thead和tbody标签，则table.children[0]是tbody
vartr=thead.children[0];
vartd=tr.children[colIdx];
}
td.style.width=isShow?200:0;

vart2=time2stamp();
alert("耗时："+(t2-t1)+"毫秒");
}

//--------------------------------------------------------
createTable();
//--></script>

相关文章