简体   繁体   中英

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

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?

PS without jQuery

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 common 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:

  1. do nothing, or
  2. 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 comment on pradipgarala s 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?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM