无法隐藏表中的每一行（jQuery）

I have a bool in my table, depending on if that is true or false, I would like to hide or show rows in the table but it's only the first row that gets affected. I am guessing, it's problem with the loop?

我的表中有一个bool，取决于它是真还是假，我想在表中隐藏或显示行，但它只是第一行受到影响。我猜，这是循环的问题？

<div>
  <div>
    <table>
      @foreach (var proj in Model) {
        if (proj.IsActive == true) {
          <tbody id="activeTableProj">
            <tr class="click-row">
              <td>@Html.ActionLink(@proj.Title, "Details/" + proj.Id, "Projects", null, new { @class = "textcolor" })</td>
              <td>???</td>
              <td>@proj.Platform</td>
              <td>???</td>
              <td>@proj.ProjectLaunch</td>
              <td>@Html.ActionLink("Edit", null)</td>
            </tr>
          </tbody>
        } else if (proj.IsActive == false){
          <tbody id="InactiveTableProj">
            <tr class="click-row">
              <td>@Html.ActionLink(@proj.Title, "Details/" + proj.Id, "Projects", null, new { @class = "textcolor" })</td>
              <td>???</td>
              <td>@proj.Platform</td>
              <td>???</td>
              <td>@proj.ProjectLaunch</td>
              <td>@Html.ActionLink("Edit", null)</td>
            </tr>
          </tbody>
        }
      }
    </table>
  </div>
</div>
<script type="text/javascript">

$(document).ready(function () {
  $("#active").click(function () {
    $("#activeTableProj").show();
    $("#InactiveTableProj").hide();
  });

  $("#inactive").click(function () {
    $("#InactiveTableProj").show();
    $("#activeTableProj").hide();
  });
});
</script>

2 个解决方案

#1

It's bad practice to create multiple HTML elements with the same id (activeTableProj, InactiveTableProj). Give them a distinct class name (perhaps activeTableProj works if you haven't used it anywhere else), and hide that instead.

创建具有相同id的多个HTML元素（activeTableProj，InactiveTableProj）是不好的做法。给它们一个不同的类名（如果你没有在其他任何地方使用它，也许activeTableProj可以工作），并隐藏它。

Try this:

尝试这个：

<div>
  <table>
    @foreach (var proj in Model) {
      if (proj.IsActive == true) {
        <tbody class="activeTableProj">
          <tr class="click-row">
            <td>@Html.ActionLink(@proj.Title, "Details/" + proj.Id, "Projects", null, new { @class = "textcolor" })</td>
            <td>???</td>
            <td>@proj.Platform</td>
            <td>???</td>
            <td>@proj.ProjectLaunch</td>
            <td>@Html.ActionLink("Edit", null)</td>
          </tr>
        </tbody>
      } else if (proj.IsActive == false) {
        <tbody class="InactiveTableProj">
          <tr class="click-row">
            <td>@Html.ActionLink(@proj.Title, "Details/" + proj.Id, "Projects", null, new { @class = "textcolor" })</td>
            <td>???</td>
            <td>@proj.Platform</td>
            <td>???</td>
            <td>@proj.ProjectLaunch</td>
            <td>@Html.ActionLink("Edit", null)</td>
          </tr>
        </tbody>
      }
    }
  </table>
</div>
<script type="text/javascript">

$(document).ready(function () {  
  $("#active").click(function () {
    $(".activeTableProj").show();
    $(".InactiveTableProj").hide();    
  });

  $("#inactive").click(function () {
    $(".InactiveTableProj").show();
    $(".activeTableProj").hide();   
  });
});

#2

You are generating a table with more tbody elements all with the same id, like:

您正在生成一个包含更多具有相同ID的tbody元素的表，例如：

<tbody id="activeTableProj">

The IDs must be unique, so I'd suggest to change the id with class, like:

ID必须是唯一的，因此我建议使用类更改id，例如：

<tbody class="activeTableProj">

In this way your code changes a bit:

这样你的代码就会改变一下：

$(".activeTableProj").show();

Your code:

你的代码：

$("#activeTableProj").show();

selects only the first tbody with that id, all the others are never considered. This is your issue.

仅选择具有该id的第一个tbody，从不考虑所有其他tbody。这是你的问题。

#1