テーブル内のすべての行を非表示にすることはできません（jQuery）

Question

私のテーブルには真または偽であるかどうかに応じてブールがありますが、テーブルに行を表示または非表示にしたいのですが、影響を受けた。私は推測している、それはループの問題ですか？

<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が有効です）。あなたが好き、すべて同じIDでもっとのtbodyの要素を持つテーブルを生成している

<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

：

これを試してみてください一意である必要があります

<tbody id="activeTableProj"> 

IDをので、私は思います

<tbody class="activeTableProj"> 

このようにしてIDをクラスに変更することを提案します。あなたのコードは、ビットを変更します。

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

あなたのコード：

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

は、そのIDでのみ最初のTBODYを選択し、他のすべては考慮されることはありません。これがあなたの問題です。