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

Question

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

我试过使用 find()，但没有成功，而且硬编码列号和名称的方式似乎很肮脏。如果可能的话，我对通过 ID 查找我的按钮特别感兴趣。下面的代码几乎可以工作，但可能会走错方向，因为我正在按特定列迭代每一行。请参阅 table 的图像。出于显而易见的原因，我没有包含生成此 table 的所有代码。 Image of table I'm working with here

<!-- 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');                   
                    }
                });

如代码所示，我正在尝试更改停用按钮的颜色和图标。最终在状态为 "Deactivated" 时使其成为 "activate button" 或在状态为 "Active"

时使其成为 "deactivate button"

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 而不是索引使其动态化。See image of end result achieved 谢谢

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

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

Jscript data table Iterate through particular column and update delete button class in same row in different column

html

asp.net-mvc

jscript