Question

I have a table which has a couple of columns that do not have required fields. This page has a mechanism to filter out content from the table which is being done client side and I am using jQuery to select the elements to hide however things do not appear to be working as expected. It works fine if I filter by some string however the behavior of an empty filter should leave only those rows with empty cells in that column.

Example table:

<table>
  <tr>
    <td class="firstCol">Some text</td>
    <td class="secondCol"><a href="##">A link!</a></td>
  </tr>
  <tr>
    <td class="firstCol"></td>
    <td class="secondCol"></td>
  </tr>
</table>

For the first column I’m doing something like:

$('table tr').find('.firstCol:not(:empty)').parent().hide();

This works for this column. All that would remain visible are the rows without content in the first column.

If I do:

$('table tr').find('.secondCol:not(:empty)').parent().hide();

All rows from column 2 are removed. Is there a generic way to select this to return only <td>s matching this behavior when they have no content? Not that it should matter but these are generated rows from a query and I have checked in the browser and the cell does not have content.

Thanks in advance.

Answer 1

I am not sure I understand your problem. Take a look at this jsFiddle. It does exactly what you want it to do.

$('table tr').find('.firstCol:not(:empty)').parent().hide();

If there is content in the firstCol td, then hide the tr that contains it (including the secondCol td, no matter if it has content or not).

$('table tr').find('.secondCol:not(:empty)').parent().hide();

If there is content in the secondCol td, then hide the tr that contains it (including the firstCol td, no matter if it has content or not).

With the HTML you provided, both JS snippets end up doing the same thing. They hide the first tr.