如何在html表格中隐藏多（千）行答案

【问题标题】：How to hide multiple (thousands) rows in the html table如何在html表格中隐藏多（千）行
【发布时间】：2015-04-11 18:49:21
【问题描述】：

我有很多行的html页面（大约40000）

<html><body>
<table id="t1">
<tr id="r1" name="1"><td>row 1</td></tr>
<tr id="r2" name="1"><td>row 2</td></tr>
....
<tr id="r50000" name="3"><td>row 30000</td></tr>
</table></body></html>

我需要一种快速的方法来隐藏/显示具有指定名称的行集（10 000 或 20 000）。平台要求：IE8-9 和 Mozilla Firefox。我盘点了很多方法：使用 tbody、块标签、隐藏行和停在一个：循环遍历行并隐藏/显示它：

curLevel=root.getAttribute("Name");
var nextElement=curElement.nextElementSibling;
while(nextElement!=null)
{
   curElement=nextElement;
   nextElement=curElement.nextElementSibling;


   if(curElement.tagName=="TR")
   {
      i++;
      childLevel=curElement.getAttribute("Name");
      if(childLevel<=curLevel)
       break;
      curElement.style.display = blockStyle;
   }
}

但是这个方法很慢！！大约需要2分钟... 循环速度很快，最慢的部分是curElement.style.display = blockStyle;，它每次都会重新绘制文档。我可以更改选择行的显示样式，然后显示更改吗？

附：没有 jQuery

【问题讨论】：

尝试搜索数据表。它是一个 API，可以管理数千甚至数百万条记录，并在服务器端工作，然后在浏览器中加载，如果您想在 3 秒内加载更有效
看看这个问题的建议：stackoverflow.com/questions/1392068/…
@dfsq，它有好主意。 1.克隆表，而不是修改它并替换子表...
@bcesars ，谢谢，但是 DataTables 是 jQuery 库，不是吗？
我只是将我的数据存储在一个对象数组中。然后使用document.createDocumentFragment()，根据具有偏移量的对象数组向其附加大约 50 个左右的，并用它替换 tbody。 DOM 让您放慢了速度，因此解决方案是将其存储在一个数组中，直到您真正需要查看记录为止。地狱在那一点上，你可以在下一个/上一个 50 中使用 ajax，如果它还没有被缓存的话。

标签： javascript html html-table hide show

【解决方案1】：

我的第一个想法是做这样的事情：

var start = 20000; // hide 10k rows
var end = 30001; // rows from 20k to 30k
while(end!=start) {
    end--;
    var x = 'r' + end;
    document.getElementById(x).style.display = "none";
}

基本上，如果可能的话，我会使用 ID 而不是通过 DOM 节点。它“更便宜”。

由于性能是一个问题，您应该注意减少比增加快。

注意：由于我没有足够的代表，我无法评论 pradipgarala 的答案，所以我会在这里注明...你能做类似 IF“请求是隐藏/显示超过 10k（或您的基准显示的任何数量）行”向服务器发送请求ELSE您在客户端做些什么？

【讨论】：

"基本上，我会使用 ID 而不是通过 DOM 节点" 不一定。 Live NodeLists 可能很慢，但 querySelectorAll 返回的静态列表应该与数组一样快。重新“...递减比递增快”。不再，在某些浏览器中速度较慢。或许在 jsperf 上做一些测试（可能已经有很多测试了，例如Loops - increment vs decrement）。

【解决方案2】：

可能最快的方法是使用 CSS 规则，通过添加和删除规则，或修改规则。由于您希望隐藏的行有一个通用名称，您可以使用以下等效项来隐藏名称为“1”的行：

tr[name="1"]{
  display: none;
}

并删除规则以显示它们。下面展示了如何做到这一点。

// Object to hold functions for adding and removeing style rules
var myStyles = (function() {

  // Use the first style sheet for convenience
  var sheet = document.styleSheets[0];

  // Delete a rule from sheet based on the selector
  function deleteRule(selector) {

    // Get rules
    var rules = sheet.rules || sheet.cssRules; // Cover W3C and IE models

    // Search for rule and delete if found
    for (var i=0, iLen=rules.length; i<iLen; i++) {

      if (selector == rules[i].selectorText) {
        sheet.deleteRule(i);
      }
    }
  }

  // Add a rule to sheet given a selector and CSS text
  function addRule(selector, text) {

    // First delete the rule if it exists
    deleteRule(selector);

    // Then add it
    sheet.insertRule(selector + text);
  }

  // Return object with methods
  return {
    'addRule': addRule,
    'deleteRule': deleteRule
  };
}());

// Convenience functions to hide and show rows
function hideRows(){
  myStyles.addRule('tr[name="1"]','{display: none}');
}
function showRows(){
  myStyles.deleteRule('tr[name="1"]');
}

如果带有选择器的规则已经存在，addRule 函数的替代行为是：

什么都不做，或者
将新的 CSS 文本添加到现有规则中

有些播放 HTML：

<table>
  <tr name="1"><td>name is 1
  <tr name="1"><td>name is 1
  <tr name="1"><td>name is 1
  <tr name="1"><td>name is 1
  <tr name="2"><td>name is 2
  <tr name="2"><td>name is 2
  <tr name="2"><td>name is 2
  <tr name="2"><td>name is 2
</table>

<button onclick="hideRows()">Hide rows named 1</button>
<button onclick="showRows()">Show rows named 1</button>

单击第一个按钮通过添加 CSS 规则隐藏所有名称为“1”的行，单击另一个按钮通过删除规则显示它们。

当然你可以做得更复杂，上面只是展示了方法。

【讨论】：

【解决方案3】：

40000 行的表格对于网页来说并不是最好的...... 像 pradipgarala 说你应该从服务器端做。

或在列表中使用“divs”来分隔行数较少的多个表..

<div id="table_1_1000">
    <table>
    ...rows from 1 to 1000
    </table>
</div>

像这样你可以只显示-隐藏你需要的 div...并且循环会更快...

但仍然不是最好的解决方案....

【讨论】：

但是我不能在单独的表中对行进行分组，它可以按任何行...我考虑了一下
你如何生成 40000 行......它是静态 html 文件还是数据库查询和 PHP 的结果？ .....请添加更多细节。
它从服务器端生成（使用jsp + tomcat）