CODEWITHSUNDEEP
c#jqueryasp.net-mvc
Hakkinen
Hakkinen

Reputation: 55

Can't hide every row in table (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?

<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>

Upvotes: 2

Views: 57

Answers (2)

C. Helling
C. Helling

Reputation: 1402

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.

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

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42054

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

<tbody id="activeTableProj">

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

<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.

Upvotes: 2

Related Questions