Note that there are some explanatory texts on larger screens.

plurals
  1. POFilter td elements in a tr out, that are not displayed
    text
    copied!<p>I have a Datatable in asp.net that i want to modifiy. I select the <code>&lt;tr&gt;</code> rows of the Datatable with JQuery:</p> <pre><code>var rows = $("#dgInformation tr:gt(0)"); </code></pre> <p>However, the <code>&lt;tr&gt;</code>elements have multiple <code>&lt;td&gt;</code>elements and some of them are marked as <code>display:none</code>. How can i get the <code>rows</code>-variable without those hidden cells?</p> <p>The purpose of this is to check cells if they are different from each other and only one line for each difference should be displayed. If i dont filter the not displayed elements, they get also compared and i have lines, which are visually the same.</p> <p><strong>Update</strong> It works with just adding a CSS class to the <code>&lt;td&gt;</code>-elements that should be hidden. Then you have a clean DOM-Tree (i hope i can call it this way) in Firebug. The whole function below for reference:</p> <pre><code>function filterTable() { var rows = $("#dgInformation tr:gt(0)"); var prevRow = null; var counter = 2; rows.each(function (index) { if (prevRow !== null) { var i = 1; var changes = 0; $(this).children("td:visible").each(function () { if(i &gt; 2){ if ($(':nth-child(' + i + ')', $(prevRow)).html() != $(this).html()) { $(':nth-child(' + i + ')', $(prevRow)).css('backgroundColor', '#00FF00'); changes = changes + 1; } } i++; }); if(changes == 0) { $(prevRow).css('display','none'); $(prevRow).removeClass(); } else { $(prevRow).removeClass(); if(counter % 2 == 0) $(prevRow).addClass('dgItemStyle'); else $(prevRow).addClass('dgAlternatingItemStyle'); counter = counter + 1; } } prevRow = this; }); } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload