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();