Reputation: 55
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
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
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