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>

我需要一种快速方法来隐藏/显示具有指定名称的行（10 000或20 000）。平台要求：IE8-9和Mozila 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;它每次重新绘制文档。我可以更改选择行的显示样式，然后显示更改吗？

P.S。没有jQuery

Answer 1

可能最快的方法是使用CSS规则，通过添加和删除规则，或修改规则。由于您要隐藏的行具有通用名称，因此您可以使用以下等效项隐藏名称为＆＃34; 1＆＃34;的行：

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>

点击第一个按钮会隐藏名称为＆＃34; 1＆＃34;的所有行。通过添加CSS规则，单击其他按钮可通过删除规则来显示它们。

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

Answer 2

一个包含40000行的表格不适合网页.... 比如 pradipgarala 说你应该从服务器端这样做。

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

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

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

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

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节点。它更便宜＆＃34;。

由于性能是一个问题，你应该注意到减少的速度要快于增量。

注意：由于我没有足够的代表，我无法对 pradipgarala 的答案发表评论，所以我在这里注意到......你能做点什么吗？喜欢 IF ＆＃34;请求隐藏/显示超过10k（或您的基准显示的任何数字）行＆＃34;发送请求服务器 ELSE 在客户端做什么？

如何隐藏html表中的多个（数千）行

3 个答案: