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

Question

I have a few columns in a html data table. 1 column I'm interested in is the status column and I have 3 buttons in the last column. 1 is a delete button. Your typical CRUD button setup for MVC. I want to removeClass().addClass of the delete button when the status of a column,row = active or inactive.

I've tried using find(), no luck there and seems dirty way to hardcode column numbers and names. I am particularly interested in finding my buttons by ID if possible. The code below almost works, but might be going wrong direction as I'm iterating each row by a specific column. Please see image of table. For obvious reason I have not included all code to generate this 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');                   
                    }
                });

As seen in the code, I'm trying to change the colour and the icon of the Deactivate button. Ultimately making it an "activate button" when status is "Deactivated" or "deactivate button" when status is "Active"

Answer 1

Thank you Patrick,

Your work around almost worked. For some reason the toggle did not work on the button color and the status column. It mysteriously worked on the icon of the button, so I left it intac and made some small changes which gave me the end result. Below is my revised code that works with your solution. Kudos for making it dynamic by working with ID and not indexes.See image of end result achieved Thanks

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