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

using non-unqiue id with jQuery will cause issues, but I'll leave that with you

here is what you should do to show hidden rows.

$("#showHiddenRows").click(function() {
    if($(this).is(":checked")) {
      $("#tableName").each(function() {
        var table = $(this);
        var hiddenRows = table.find("tr[id=foo]").show();
        if(hiddenRows.length)
          alert("found " + hiddenRows.length + " hidden rows");
      });
    } else {
       alert("hiding");
    }
});

Answer 2

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' ]();
    });
});

Answer 3

Ended up with (thanks to user3558931):

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