如何在 html table 中隐藏多个（数千）行

Question

我的 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>

我需要一种快速方法 hide/show 具有指定名称的行集（10 000 或 20 000）。平台要求：IE8-9 和 Mozila Firefox。我列出了很多方法：使用 tbody、块标记、隐藏行并在一个处停止：循环 trow 行和 hide/show it:

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; 它每次都重新绘制文档。我可以更改选择行的 显示样式 然后显示更改吗？

P.S。没有 jQuery

Answer 1

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

或在列表中使用 "divs" 分隔行数较少的多个 table..

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

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

但仍然不是最佳解决方案....

Answer 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”的所有行，单击另一个按钮可通过删除规则来显示它们。

当然你可以做得更复杂，上面只是介绍方法。

Answer 3

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

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 个节点。这是 "cheaper".

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

注意：由于我没有足够的代表，我无法对 pradipgarala 的回答发表评论，所以我会在这里注明......你可以做类似的事情吗IF "request is to hide/show over 10k(or whatever number your benchmark show you) rows" 向服务器发送请求 ELSE 你在客户端做什么？

如何在 html table 中隐藏多个（数千）行

How to hide multiple (thousands) rows in the html table

html

javascript

html-table

show

hide