原文地址: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. 记录java/javascript让浮点数显示两位小数的方法

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

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

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

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

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

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

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

  5. DevExpres表格控件运行时动态设置表格列

    本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...

  6. JQuery中隐藏/显示事件函数

    1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...

  7. Zbrush 4R7 P3中各类模型怎么快速隐藏

    在ZBrush®软件中除了遮罩功能可以对模型局部进行编辑外,我们还可以通过显示和隐藏来对模型的局部进行控制. 查看更多内容请直接前往:http://www.zbrushcn.com/jichu/xia ...

  8. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  9. ASPxGridView动态创建表格列编辑模板

    在项目中用到了DevExpress的ASPxGridview控件,每每去配置它的时候,总感觉很是啰嗦,于是想到了用代码自动配置. 于是有了这样的代码: foreach (ZiyuWeb.Entity. ...

随机推荐

  1. 深入理解Java反射

    要想理解反射的原理,首先要了解什么是类型信息.Java让我们在运行时识别对象和类的信息,主要有2种方式:一种是传统的RTTI,它假定我们在编译时已经知道了所有的类型信息:另一种是反射机制,它允许我们在 ...

  2. c语言编程

    1.常量和变量:变量是一块内存空间,该内存空间有类型约束,该内存中存放的数据可变. 变量三要素:类型,名称,值.常量:常量的数据永远不变,a:自变量,b:符合常量,c:预定义常量. 2.运算符和返回类 ...

  3. SendInput模拟键盘输入的问题

    SendInput模拟键盘输入的问题  http://www.cnblogs.com/yedaoq/archive/2010/12/30/1922305.html 最近接触到这个函数,因此了解了一下, ...

  4. [.net 面向对象程序设计进阶] (7) Lamda表达式(三) 表达式树高级应用

    [.net 面向对象程序设计进阶] (7) Lamda表达式(三) 表达式树高级应用 本节导读:讨论了表达式树的定义和解析之后,我们知道了表达式树就是并非可执行代码,而是将表达式对象化后的数据结构.是 ...

  5. 【BZOJ-1952】城市规划 [坑题] 仙人掌DP + 最大点权独立集(改)

    1952: [Sdoi2010]城市规划 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 73  Solved: 23[Submit][Status][ ...

  6. word文档的生成、修改、渲染、打印,使用Aspose.Words

    无需MS Word也可执行各种文档处理任务,包括文档的生成.修改.渲染.打印,文档格式转换和邮件合并等文档处理.

  7. MySQL Server-id踩到的坑

    最近踩到一个说大不大,说小不小的坑,在此分享出来给各位同学.事情是这样的,线上有2台服务器,1主1从.A -> B,B服务器从A服务器同步数据.每天使用xtrabackup在B服务器上面进行全备 ...

  8. 数据库SQL Server DAC 导入导出数据到SQL Azure问题

    对Export data-tier application报错的处理 Error:SQL71564 这个问题是数据库中一些对象如MS_Description,MS_DiagramPane1不支持DAC ...

  9. toast 防止一直不停弹出,累积显示

    private Toast mToast = null; public void showTextToast(String msg) { if (mToast == null) { mToast = ...

  10. openstack(liberty): 简单网络连接图

    openstack起初的网络部分是和计算核心nova合在一起的,后来被拆分出来,独立成为一个模块, 现在名为Neutron. 本博文是学习记录,记录的是基于GRE tunnel技术的neutron和计 ...