如果找到值，JQuery将显示表行

Question

This might seem similar to other questions, and I have found and read through those questions and tried them, but I haven't gotten a working solution as of course, my code is unique and I need maybe another set of eyes to help me find my bug.

Anyway, the problem:

I'm creating a table (with PHP), and essentially if a cell has a value, the row gets an id of 'foo' and is hidden (using CSS - display: none;), and when I click a checkbox I'm trying to display all those hidden rows.

<tr id='foo'><td>this row is hidden</td></tr>
<tr><td>this row is not hidden</td></tr>

My jQuery is currently this:

$("#showHiddenRows").click(function() {
    if($(this).is(":checked")) {
        alert("showing"); //This pops up
        $("#tableName").each(function() {
            if($("#tableName").find("tr").attr("id") === 'foo') {
                $("#tableName").find("tr").attr("style", "display: initial;");
                alert("found a hidden row"); //This does not pop up...
            }
        });
    } else {
        alert("hiding");
        //essentially the same code here, but display:none;
    }

So I added alerts as you can see, the "showing" and "hiding" alerts pop up, but the "found a hidden row" doesn't, implying that searching through my table doesn't find any rows with an ID of 'foo', and I'm not sure why. Is there a better way to do this/is this the best way, and if so what did I do wrong?

Thanks in advance!

Edit: Quick explanation of what I was intending the code to do:

• Loop through each row in the tableName table
• If you find a tablerow with an ID of 'foo', show or hide the row.

Answer 1

Do not use duplicate IDs; use a CSS class instead. By definition, IDs should be unique; therefore no two or more elements should have the same ID.

HTML:

<tr class='foo'><td>this row is hidden</td></tr>
<tr><td>this row is not hidden</td></tr>

JS:

$(function() {
    $("#showHiddenRows").on('change', function() {
        if( this.checked ) {
            $('table tr.foo').show();
        } else {
            $('table tr.foo').hide();
        }
    });
});

Or, you could shorten it like this:

$(function() {
    $("#showHiddenRows").on('change', function() {
        $('table tr.foo')[ this.checked ? 'show' : 'hide' ]();
    });
});