原文地址：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/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. spring MVC 的MultipartFile转File？？

    MultipartFile file = xxx;         CommonsMultipartFile cf= (CommonsMultipartFile)file;         DiskF ...

  2. 解决$.getJSON在IE浏览器下出现数据缓存,第一次访问某个后台路径之后，再次访问该路径不再走后台的方法。

    最近写代码的时候遇到一个小问题,我用的是火狐,项目里测试人员用的是IE,当用jquery的getjson函数从后台获取数据的时候,IE浏览器会自动设置缓存,如果此时你对数据进行修改的时候刷新页面,IE ...

  3. 二叉搜索树 POJ 2418 Hardwood Species

    题目传送门 题意:输入一大堆字符串,问字典序输出每个字符串占的百分比 分析:二叉搜索树插入,然后中序遍历就是字典序,这里root 被new出来后要指向NULL,RE好几次.这题暴力sort也是可以过的 ...

  4. Android应用帧率--FPS测试

    Android应用帧率FPS是衡量应用流畅度的一个非常重要的指标,可以根据FPS对应用做一些优化,那么在开发过程中如何来测试我们的应用的FPS呢? 准备工具:Eclipse + Android测试终端 ...

  5. [转]redis-cluster研究和使用--待研究

    转自:http://hot66hot.iteye.com/blog/2050676 一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis ...

  6. BZOJ 1051 & 强联通分量

    题意: 怎么说呢...这种题目有点概括不来....还是到原题面上看好了... SOL: 求出强联通分量然后根据分量重构图,如果只有一个点没有出边那么就输出这个点中点的数目. 对就是这样. 哦还有论边双 ...

  7. [Java] java.util.Arrays 中使用的 sort 采用的算法 (转)

    http://book.douban.com/annotation/15154366/Q: java.util.Arrays 中使用的 sort 采用的是什么算法?   A: java中Arrays. ...

  8. [题解]扫雷Mine

    // 此博文为迁移而来,写于2015年2月6日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vrft.html 1088 ...

  9. To Do List

    妈呀...发现不发博文公布自己要学的东西压力少太多了.......... 然后就会变得颓废..................... 求大家监督QAQ....To Do List是近3天左右目标,3天 ...

  10. Codeforces Round #200 (Div. 2) E. Read Time(二分)

    题目链接 这题,关键不是二分,而是如果在t的时间内,将n个头,刷完这m个磁盘. 看了一下题解,完全不知怎么弄.用一个指针从pre,枚举m,讨论一下.只需考虑,每一个磁盘是从右边的头,刷过来的(左边来的 ...