How To Hide Multiple (thousands) Rows In The Html Table

Question

I have html page with many rows (is about 40000)

Solution 1:

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 rulesvar myStyles = (function() {

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

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

    // Get rulesvar rules = sheet.rules || sheet.cssRules; // Cover W3C and IE models// Search for rule and delete if foundfor (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 textfunctionaddRule(selector, text) {

    // First delete the rule if it existsdeleteRule(selector);

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

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

// Convenience functions to hide and show rowsfunctionhideRows(){
  myStyles.addRule('tr[name="1"]','{display: none}');
}
functionshowRows(){
  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><trname="1"><td>name is 1
  <trname="1"><td>name is 1
  <trname="1"><td>name is 1
  <trname="1"><td>name is 1
  <trname="2"><td>name is 2
  <trname="2"><td>name is 2
  <trname="2"><td>name is 2
  <trname="2"><td>name is 2
</table><buttononclick="hideRows()">Hide rows named 1</button><buttononclick="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.

Solution 2:

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..

<divid="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....

Solution 3:

My first idea would be to do something like this:

var start = 20000; // hide 10k rowsvar end = 30001; // rows from 20k to 30kwhile(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 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?

Html5 Guide

How To Hide Multiple (thousands) Rows In The Html Table

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Hide Multiple (thousands) Rows In The Html Table"