隐藏表格列，最常见的是如下方式：
复制代码 代码如下:
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>
遗憾的是，我们 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><style bogus="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><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='创建表格：使用 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 列'>
<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; // 创建万行表格
//--------------------------------------------------------
// 时间转为时间戳（毫秒）
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>
复制代码 代码如下:
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>
遗憾的是，我们 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><style bogus="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><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='创建表格：使用 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 列'>
<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; // 创建万行表格
//--------------------------------------------------------
// 时间转为时间戳（毫秒）
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>
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“javascript 极速 隐藏/显示万行表格列只需 60毫秒”评论...
更新动态
2024年11月13日
2024年11月13日
- 刘欢《雨中的树(新歌加精选)2CD》德国HD24K金碟[WAV+CUE]
- 郑源 《世间情歌》6N纯银SQCD[WAV+CUE][1G]
- 群星《粤潮2HQII》头版限量编号[低速原抓WAV+CUE][991M]
- 群星《2023好听新歌21》十倍音质 U盘音乐[WAV分轨][1G]
- 《热血传奇》双11感恩回馈 超值狂欢30天
- 原神5.2版本活动汇总 5.2版本活动有哪些
- 张敬轩.2010-NO.ELEVEN【环球】【WAV+CUE】
- 黄丽玲.2006-失恋无罪【艾回】【WAV+CUE】
- 阿达娃.2024-Laluna【W8VES】【FLAC分轨】
- 宝可梦大集结段位等级划分表大全 大集结段位一览
- 龙腾世纪影障守护者工坊与装备如何升级 工坊与装备升级说明
- 龙腾世纪影障守护者全成就攻略分享 龙腾世纪4全成就列表一览
- 《剑星》更新四套全新战衣！
- 卡普空老将伊津野英昭宣布入职腾讯光子 开发3A动作
- 38岁梅根·福克斯官宣怀孕：将迎来第四个孩子