原文地址: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. 移动前端开发-单页应用(spa)模型

    一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面:对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合.使用HTML+C ...

  2. 3.Java网络编程之IP

    前面两篇博文我们已经简单了解了IP.端口.协议以及两种参考模型,我们现在重新从程序角度来看下这个参考模型. 如果我们从事的是Web网站开发,那么我们应该知道HTML是一种超文本标记语言 (Hyper ...

  3. 【转】常用的shell脚本

    from:http://blog.sina.com.cn/s/blog_4152a9f501013r6c.html 常用的shell脚本 (2012-10-10 22:09:07) 转载▼ 标签: 杂 ...

  4. Android 实例子源代码文件下载地址380个合集

      android 城市列表特效 - 触摸查找源码 .rar: http://www.t00y.com/file/64337887 android 日记系统源码(数据库的基本操作) .rar: htt ...

  5. android 初探

    2014年7月27日 15:02:57 附: android 官方培训课程中文版 //官方简单的入门教程, 每个大类中只介绍了几个知识点, 可以快速搭建一个hello world android 开发 ...

  6. 跨域请求之jQuery的ajax jsonp的使用解惑

    前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...

  7. 学习总结 java 父子级

    package com.hanqi; //父类 public class Father { // public Father() // { // // } // public Father(Strin ...

  8. 设计模式之桥接模式(Bridge)

    桥接模式与原理:将抽象部分与实现部分分离,使它们都可以独立的变化.最终的结果表现在实现类中.两者之间属于等价关系,即实现部分和抽象部分可以相互交换. 代码如下 #include <iostrea ...

  9. unix 时间

    from_unixtime()是MySQL里的时间函数 mysql>SELECT FROM_UNIXTIME( 1249488000, '%Y%m%d' ) ->20071120 mysq ...

  10. linux内核结构

    Linux内核子系统: 分别是:进程调度(SCHED).进程间通信(IPC).虚拟文件系统(VFS).内存管理(MM).网络通信(NET) 进程调度与内存管理之间的关系:这两个子系统互相依赖.在多道程 ...