Question

这可能看起来与其他问题类似，我已经找到并阅读了这些问题并尝试了它们，但我当然没有得到可行的解决方案，我的代码是独一无二的，我可能需要另外一套眼睛帮我找到我的虫子。

无论如何，问题是：

我正在创建一个表（使用PHP），并且基本上如果一个单元格有一个值，该行的ID为＆＃39; foo＆＃39;并隐藏（使用CSS - display：none;），当我单击复选框时，我试图显示所有隐藏的行。

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

我的jQuery目前是这样的：

$("#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;
    }

所以我添加了警报，你可以看到，＆＃34;显示＆＃34;并且＆＃34;隐藏＆＃34;警报弹出，但＆＃34;发现了一个隐藏的行＆＃34;没有，这意味着在我的表格中搜索并没有找到任何ID为“foo”的行，我不知道为什么。有没有更好的方法来做这个/这是最好的方式，如果是这样，我做错了什么？

提前致谢！

编辑：快速解释我打算执行的代码：

遍历tableName表中的每一行
如果您找到ID为＆＃39; foo＆＃39;的tablerow，请显示或隐藏该行。

Answer 1

在jQuery中使用非唯一ID会导致问题，但我会把它留给你

这是您应该对show个隐藏行进行的操作。

$("#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

请勿使用重复ID ;改为使用CSS类。根据定义，ID应该是唯一的;因此，没有两个或更多元素应具有相同的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

结束（感谢user3558931）：

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

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

3 个答案: