How to hide a table row depending on a value in one of its column

Question

I have a table like the following.

<table id="subtask_table" style="width: 80%">
    <tr>
        <th>ID</th>
        <th>Titel</th>
        <th>Beschreibung</th>
        <th>Gemeldet von</th>
        <th>Erstellt am</th>
        <th>Geändert am</th>
        <th>Erledigt</th>


    </tr>

    <tr>
        <td>11</td>
        <td><a href="/taskExplorer/subtasks/edit/11">Termine verschieben</a></td>
        <td></td>
        <td></td>
        <td>2012-07-26 14:34:36</td>
        <td>2012-07-30 08:37:40</td>
        <td>1</td>
        <td><a href="/taskExplorer/subtasks/delete/11">löschen</a></td>
      </tr>
</table>

What I want to do is hide a row of this table, if the column erledigt (completed) is 0 or empty.

That's what I got this far:

$(document).ready(function() {
    $('#cbHideCompleted').click(function() {
        if($(this).prop('checked')) {

            $('#subtask_table td').each(function() {
                //if td is 'completed' column
                    //if value is 0 or null
                        //hide

            });
        } else {
            $('#subtask_table td').each(function() {
                $(this).show();
            });
        }
    });
});

Is there a way to access the elements directly with a jquery selector. If not, how do I implement "//if td is 'completed' column"?

Thanks for your help.

Answer 1

Assuming your erledigt column is always the second last column then it should be very straight forward.

Iterate through the rows and not the cells and find the second last cell in each row and show/hide the row as required.

$('#subtask_table tr').each(function() {
    var $erledigtCell = $(this).find("td").last().prev();
    var $row = $erledigtCell.parent();

    if($erledigtCell.text() == '1'){
        $row.hide();
    } else {
        $row.show();
    }
});

If you have any influence on how the grid is generated it would be much better if you can add a custom attribute to the tr , for example data-erledigt=... . Than you have no traversing to do and it doesn't matter which column erledigt is displayed in.

With Html like this:

<tr data-erledigt=0>....
.....
<tr data-erledigt=1>

You could write a jQuery as simple as:

$("tr[data-erledigt='0']").hide();

Answer 2

$('#subtask_table tr td:eq(6)').each(function() { // eq(6) selects the 7-th td, which is the "completed" column
    if(this.innerHTML === '0' || this.innerHTML === '')
    {
        $(this).parent().hide(); // td.parent returns the tr
    }
});

Also, this is redundant (though I'm not sure what this accomplishes, maybe you want to show the rows (tr not td) instead):

$('#subtask_table td').each(function() {
    $(this).show();
});

Simply use:

$('#subtask_table td').show();

Answer 3

I'd probably do this:

$(document).ready(function() {
    $('#cbHideCompleted').click(function() {
        if($(this).prop('checked')) {    
            $('#subtask_table td:nth-child(7)').each(function() {
                //if td is 'completed' column
                var val = $(this).text();
                if (val === "" || val === "0")
                    $(this).parent().hide();    
            });
        } else {
            $('#subtask_table tr').show();
        }
    });
});

The :nth-child() selector "Selects all elements that are the nth-child of their parent", so $('#subtask_table td:nth-child(7)') selects all the td elements in the 7th column. So loop through those cells and if the text content is an empty string or "0" hide its parent tr element.

In your else branch you don't need an .each() loop: you can call .show() directly on a jQuery object that contains multiple elements and all the elements will be shown.