[转]javascript 快速隐藏/显示万行表格列的方法

时间:2022-09-17 16:22:23

原文地址:javascript 快速隐藏/显示万行表格列的方法

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

td.style.display = "none";

这种方式的效率极低。例如,隐藏一个千行表格的某列,在我的笔记本上执行需要约 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 列'>
<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>

[转]javascript 快速隐藏/显示万行表格列的方法的更多相关文章

  1. javascript中隐藏显示的样式表属性

    display属性 隐藏不占据位置 visibility属性 隐藏占据位置 //使用display的样式属性 隐藏 显示 //隐藏后不占据文档流位置 function showAddForm(){ v ...

  2. JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招

    一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...

  3. 记录java&sol;javascript让浮点数显示两位小数的方法

    参考:http://www.jb51.net/article/46010.htm 另,如果只是要在页面层展示的时候,显示为两位小数,也可以直接改前端js代码. item.turnoverRate = ...

  4. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  5. FineUIMvc随笔(1)动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  6. element-ui表格列金额显示两位小数

    对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值 和 v-b ...

  7. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  8. 如何写javascript代码隐藏和显示这个div

    如何写javascript代码隐藏和显示这个div 浏览次数:82次悬赏分:10 | 解决时间:2011-4-21 14:41 | 提问者:hade_girl <div id="div ...

  9. 分享一个我的JavaScript版GridView多功能表格

    GridView是什么? GridView是由Mr.Co开发的一套开源的多功能表格插件,主要用于让页面开发者在开发中节省拼接Table表格和操作Table表格相关复杂操作的开发成本与时间.开发人员可以 ...

随机推荐

  1. 详解tintColor属性

    tintColor属性是iOS7之后新加的一个属性,这个属性定义了一个非默认的着色颜色值,其值的设置会影响到以视图为根视图的整个视图层次结构.它主要是改变控件的颜色,以获取一些有意思的视觉效果. ti ...

  2. Mybatis保存数据时事务问题

    今天不小心在sqlplus中用for update ,然后事务没提交,结果在项目中一直保存不进去数据,找了很久发现是sqlplus中的事务没提交,哎,这种问题真得避免啊,一定要细心啊!

  3. ubuntu16&period;04下安装openssh-server报依赖错误的解决方法

    问题:系统重装后,安装和配置SSH,防火墙配置 #安装install openssh-server sudo apt install openssh-server -y 遇到问题: sudo apt ...

  4. 采集爬虫中,解决网站限制IP的问题? - wendi&lowbar;0506的专栏 - 博客频道 - CSDN&period;NET

    采集爬虫中,解决网站限制IP的问题? - wendi_0506的专栏 - 博客频道 - CSDN.NET undefined

  5. UVA 1291 Dance Dance Revolution&lpar;DP&rpar;

    意甲冠军:跳舞机有一个上5积分,分别central, top, bottom, left, right分,区区足站立还是需要1点物理,从一个单纯的脚central点上须要2点体力,从一个点上移动到相邻 ...

  6. 倍增&bsol; tarjan求lca

    对于每个节点v,记录anc[v][k],表示从它向上走2k步后到达的节点(如果越过了根节点,那么anc[v][k]就是根节点). dfs函数对树进行的dfs,先求出anc[v][0],再利用anc[v ...

  7. python cookbook 小结

    最近一直在看python cookbook.这本书主要讲的是python 语言的一些编程素材.正如它的名字一样,烹饪书.就好像再讲如何处理食材(各种类型的数据),然后再煮菜(算法).打个比方,煮菜随便 ...

  8. 使用JfreeChart生成图表遇到的问题

    生成的图片不显示 需要在web.xml中配置一个指定的Servlet <servlet> <servlet-name>DisplayChart</servlet-name ...

  9. ORA-01555错误

    有这样一种情况 0:00 我们开始查询,查询的数据是100万条 0:01 一个session update了第100万条数据 0:01 update提交了,完成 1:00 我们的查询还在继续,只读到了 ...

  10. 坑人的 Javascript 模块化编程 sea&period;js

    坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...