c# - 无法隐藏表中的每一行(jQuery)

Question

我的表中有一个 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>

Answer 1

创建多个具有相同 ID 的 HTML 元素(activeTableProj、InactiveTableProj)是不好的做法。给它们一个不同的类名(如果您没有在其他任何地方使用它，也许 activeTableProj 可以工作)，然后隐藏它。

试试这个:

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