Jscript 数据表 遍历特定列并更新不同列中同一行中的删除按钮类

Question

我在html数据表中有几列。 我感兴趣的 1 列是状态列，最后一列中有 3 个按钮。 1 是删除按钮。MVC 的典型 CRUD 按钮设置。我想删除删除按钮的 removeClass((.addClass 当列的状态，行 = 活动或非活动时。

我试过使用 find((，那里没有运气，而且硬编码列号和名称的方式似乎很脏。如果可能的话，我对按ID查找我的按钮特别感兴趣。下面的代码几乎可以工作，但是当我按特定列迭代每一行时，可能会走错方向。请参阅表格图像。出于显而易见的原因，我没有包含生成此表的所有代码。 我在这里使用的表格的图像

<!-- language-all: lang-html -->
<table id="example">
<thead class="thead-color">    
<tr>
<th>
@Html.DisplayNameFor(model => model.CardNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.BayNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.cardStatus)
</th>
<th></th>
</tr>
<tbody id="thegrid">
@foreach (var item in Model)
{
<td>
@Html.DisplayFor(modelItem => item.CardNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.BayNumber)
</td>
<td align="center">
<span id="mycardstatus" class="badge badge-success">@Html.DisplayFor(modelItem => item.cardStatus)</span>
</td>
<td align="center">
<a asp-action="Edit" data-toggle="tooltip" title="Edit Card @item.CardNumber" class="btn btn-primary" asp-route-id="@item.CardId"><i class="far fa-edit"></i> </a>
<a asp-action="" id="statusbtncolor" title="Deactivate Card @item.CardNumber" class="btn btn-danger" data-id="@item.CardId" data-id2="@item.CardNumber" data-toggle="modal" data-target="#confirm-single-delete"><i id="statusbuttonicon" class="far fa-times-circle"></i></a>
</td>
</table>

<!-- language: lang-js -->
@section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$('#example #mycardstatus').each(function (row) { //iterate over all table rows                 
if ($(this).text().trim() == 'Deactivated') {
$(this).removeClass('badge-success').addClass('badge-danger');                        
$("#example #togglestatusbtncolor", row).removeClass('btn-danger').addClass('btn-success');
$("#example #togglestatusbuttonicon", row).removeClass('fa-times-circle').addClass('fa-check-circle');                         
}
else {
$(this).removeClass('badge-danger').addClass('badge-success');                                                                                   
$("#example #statusbtncolor", row).removeClass('btn-success').addClass('btn-danger');
$("#example #statusbuttonicon", row).removeClass('fa-check-circle').addClass('fa-times-circle');                   
}
});

如代码所示，我正在尝试更改停用按钮的颜色和图标。最终使其成为状态为"已停用"时的"激活按钮"或状态为"活动"时的"停用按钮">

Answer 1

试试这个。不过还没有测试过。

$(document).ready(function() {
$('#example tr').each(function () { //iterate over all table rows      
//Get status column value
var status = $(this).find('#mycardstatus').text();
//Toggle class based on status column
$(this).find('#statusbtncolor').toggleClass(function() {
return (status == "Deactivated") ? "btn btn-success" : "btn btn-danger";
});
//Toggle class based on status column
$(this).find('#togglestatusbuttonicon').toggleClass(function() { 
return (status == "Deactivated") ? "fa-check-circle" : "fa-check-check";
}); 
});                                 

}(;

Answer 2

谢谢帕特里克，

你的工作几乎奏效了。由于某种原因，切换对按钮颜色和状态列不起作用。它神秘地作用于按钮的图标，所以我离开了它，并做了一些小的更改，给了我最终的结果。下面是我修改后的代码，适用于你的解决方案。通过使用 ID 而不是索引使其动态化表示赞赏。查看实现的最终结果的图像谢谢

$(document).ready(function () {
$('#example tr').each(function () { //iterate over all table rows                      
//Get status column value
var status = $(this).find('#mycardstatus').text();                
if (status == "Deactivated") {
$(this).find('#mycardstatus').removeClass('badge-success').addClass('badge-danger');
}
else {
$(this).find('#mycardstatus').removeClass('badge-danger').addClass('badge-success');
}
if (status == "Deactivated") {
$(this).find('#statusbtncolor').removeClass('btn-danger').addClass('btn-success');
}
else {
$(this).find('#statusbtncolor').removeClass('btn-success').addClass('btn-danger');                    
}
//Toggle class based on status column
$(this).find('#togglestatusbuttonicon').toggleClass(function () {
return (status == "Deactivated") ? "fa-check-circle" : "fa-check-check";
});
});