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

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

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

Solution 3:

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

JavaScript Lib

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"