javascript 极速 隐藏/显示万行表格列只需 60毫秒

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

  

复制代码 代码如下:

  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>