当TD包含特定类别时隐藏TR

Question

I have the below Javascript code on my PHP page, I pass the table name and a variable to the function. The "ALL" portion of the code works fine, parses through the page and flips all of the CSS style display descriptors from 'none' to '' or back.

Where I'm running into issues is the "RED" portion. It is supposed to hide all TR which contain a TD of the class "RedCell" but I cannot seem to get this part working as intended. Please help.

JAVASCRIPT

function expandCollapseTable(tableObj, which)
{
 if (which == 'ALL')
    {
      var rowCount = tableObj.rows.length;
      for(var row=0; row<rowCount; row++)
      {
        rowObj = tableObj.rows[row];
        rowObj.style.display = (rowObj.style.display=='none') ? '' : 'none';
      }

      return;
    }

  if (which == 'RED')
    {
      $('td.RedCell').find('td.RedCell').closest('tr').style.display =  'none';
      return;
    } 

  else
    {
      return;
    }
}

CSS

.ResultTable td.RedCell{
    background-color:#FF4747;
}

HTML BUTTONS AND EXAMPLE TABLE

<input type="button" value="Show/hide ALL" onclick="expandCollapseTable(TheTable, 'ALL')" />

<input type="button" value="Hide Red" onclick="expandCollapseTable(TheTable, 'RED')" />

<table id="TheTable" class="ResultTable" style="padding: 0px; background: #FFFFFF;" align="center">
<tr><td class="RedCell">2014-07-17 10:04</td><td>1998847</td><td>137717</td></tr>
<tr><td>2014-08-06 10:44</td><td>2009211</td><td>106345</td>
<tr><td class="RedCell">2014-07-31 16:47</td><td>2006727</td><td>138438</td>

So the first and third row would be hidden and second row left visible

CodePen version of code http://codepen.io/anon/pen/DrKLm

Answer 1

It should be:

$('td.RedCell', tableObj).closest('tr').hide();

The call to .find() was looking for another td.RedCell inside the first one.

Also, you can't use the .style property with jQuery objects, that's for DOM elements. To hide something with jQuery, use .hide() or .css("display", "none") .

And you need to restrict your searching to within the given tableObj .

BTW, why aren't you using jQuery for the ALL option? That entire loop can be replaced with:

$("tr", tableObj).toggle();

Answer 2

Two problems, the .find is saying to find descendents of the td.RedCell's that are td.RedCells. There aren't any of those...

Then, use .css to set the style.

So this:

$('td.RedCell').closest('tr').css('display', 'none');

Answer 3

Instead of going from the child up to the parent, use the jQuery :has selector to filter elements based on descendents.

$(tableObj).find('tr:has(td.RedCell)').hide();

In addition, you'll probably want to hide all of the cells only if none are already hidden. If any are hidden, you'll want to show those and keep the rest visible. Here's an example of that...

var rows = $(tableObj).find('tr:gt(0)'); // Skips the first row
if(rows.is(':hidden')) {
    // Contains elements which are hidden
    rows.show();
} else {
    rows.hide();
}

The result would be:

function expandCollapseTable(tableObj, which) {
    var rows = $(tableObj).find('tr:gt(0)');
    if(which == 'RED') {
        // First snippet
        rows.has('td.RedCell').hide();
    } else if(which == 'ALL') {
        // Second snippet
        if(rows.is(':hidden')) {
            rows.show();
        } else {
            rows.hide();
        }
    }
}

http://codepen.io/anon/pen/xlmcK

Extra programming candy:

The second snippet could be reduced to rows[rows.is(':hidden')?'show':'hide']();