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（activeTableProj，InactiveTableProj）创建多个HTML元素是不好的做法。给他们一个不同的班级名称（如果你还没有在其他任何地方使用它，可能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();   
  });
});

Answer 2

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

<tbody id="activeTableProj">

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

<tbody class="activeTableProj">

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

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

您的代码：

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

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

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

2 个答案: