javascript - How to hide multiple (thousands) rows in the html table - Stack Overflow-软件玩家

admin管理员组
文章数量:1335624

I have html page with many rows (is about 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>

I need a fast way to hide/show set of rows (10 000 or 20 000) with the specified name. Platform requirements: IE8-9 and Mozila Firefox. I tray many methods: using tbody, block tags, hiding rows, and stop at one: loop trow the rows and 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;
   }
}

But this method is very slow!! Takes is about 2 minutes... Loop goes fast, the slowest part is curElement.style.display = blockStyle; it repaints document every time. Could I change display style for selection rows and then show changes?

P.S. without jQuery

I have html page with many rows (is about 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>

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;
   }
}

P.S. without jQuery

Share Improve this question edited Jan 2, 2017 at 23:14 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Feb 11, 2015 at 11:51 rpc1 68811 silver badges24 bronze badges

Try to search for DataTables. Its an API that can menage thousands and evem millions of records and works in server-side, load then in browser and more effectively if you wanna load less than 3 seconds – bcesars Commented Feb 11, 2015 at 11:58
1 Take a look at suggestions in this question: stackoverflow./questions/1392068/… – dfsq Commented Feb 11, 2015 at 12:06
@dfsq, it has good ideas. 1. clone table, than modify it and replace child... – rpc1 Commented Feb 11, 2015 at 12:22
@bcesars , thanks, but DataTables is jQuery library, isn't it? – rpc1 Commented Feb 11, 2015 at 12:23
I would just store my data in an array of objects. Then use document.createDocumentFragment(), append about 50 or so <tr>s to it based on the array of objects with an offset, and replace the tbody with that. The DOM is what's slowing you down, so the solution is to store it in an array until you actually need to see the records. Hell at that point you could just ajax in the next/previous 50, if it isn't already cached. – Robert Commented Feb 11, 2015 at 12:36

| Show 4 more ments

3 Answers 3

Sorted by: Reset to default 5

Probably the fastest way is to use a CSS rule, either by adding and removing a rule, or modifying one. Since the rows you wish to hide have a mon name, you can use the equivalent of the following to hide the rows with a name of "1":

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

and remove the rule to show them. The following shows how to do that.

// 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"]');
}

Alternative behaviours for the addRule function if a rule with the selector already exists are:

do nothing, or
add the new CSS text to the existing rule

Some play 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>

Clicking on the first button hides all rows with a name of "1" by adding a CSS rule, clicking the other button shows them by removing the rule.

Of course you can make it much more sophisticated, the above just shows the method.

a table with 40000 rows is not the best for a webpage.... like pradipgarala say you should do it from server side.

or at list use "divs" to separate multiple tables with less rows..

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

like this you can show-hide only the divs you need... and the loop would be faster...

but still not the best solution....

My first idea would be to do something like this:

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";
}

Basically, I would use IDs instead going trough DOM Nodes, if possible. It's "cheaper".

Since performance is an issue, you should note that is faster to decrement than to increment.

Note: Since I don't have enough rep, I can't ment on pradipgaralas answer so I'll note it here... Can you do something like IF "request is to hide/show over 10k(or whatever number your benchmark show you) rows" SEND REQUEST TO SERVER ELSE DO YOUR THING ON CLIENT SIDE?

本文标签： javascriptHow to hide multiple (thousands) rows in the html tableStack Overflow

版权声明：本文标题：javascript - How to hide multiple (thousands) rows in the html table - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742319475a2452490.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - How to hide multiple (thousands) rows in the html table - Stack Overflow

3 Answers 3

更多相关文章