单击C#MVC停用(禁用）表行

C# MVC Deactivate (Disable) table row on click

本文关键字：表行 禁用 C#MVC 停用 单击      更新时间：2023-09-26

我有一个表，它的值被循环输入，每行中都有一个按钮，如果单击该按钮，我将尝试使用该按钮来停用该行：

        <table id="categoryList" class="table">
    <thead>
        <tr>
            <th>Category ID</th>
            <th>Category Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Categories)
        {
            <tr>
                <td>@item.id</td>
                <td>@item.name</td>
                <td><button class="btn btn-default pull-left" id="btn-deactivate">Deactivate</button></td>
            </tr>
        }
    </tbody>
</table>

由于以下javascript:，行在此时是可点击的

$("#categoryList > tbody > tr").click(function (event) {
    $("#categoryModal #categoryId").val($(event.target).parent().children()[0].innerText);
    $("#categoryModal #categoryName").val($(event.target).parent().children()[1].innerText);
    $("#categoryModal .deleteButton").attr("href", $("#colDelUrl").val() + "?categoryId=" + $(event.target).parent().children()[0].innerText);
    $("#categoryModal .deleteButton").show();
    $("#categoryModal").modal({ show: true, backdrop: true });
});

目标是让按钮在单击时停用（禁用，使其无法单击）选定的行，然后在第二次单击时重新激活该行。

在表行添加活动类。

      <table id="categoryList" class="table">
    <thead>
        <tr>
            <th>Category ID</th>
            <th>Category Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Categories)
        {
            <tr class="active">
                <td>@item.id</td>
                <td>@item.name</td>
                <td><button class="btn btn-default pull-left" id="btn-deactivate">Deactivate</button></td>
            </tr>
        }
    </tbody>
</table>

只有当行具有class="active"：时，才激活点击行

$("#categoryList > tbody > tr.active").click(function (event) {
    $("#categoryModal #categoryId").val($(event.target).parent().children()[0].innerText);
    $("#categoryModal #categoryName").val($(event.target).parent().children()[1].innerText);
    $("#categoryModal .deleteButton").attr("href", $("#colDelUrl").val() + "?categoryId=" + $(event.target).parent().children()[0].innerText);
    $("#categoryModal .deleteButton").show();
    $("#categoryModal").modal({ show: true, backdrop: true });
});

通过更改tr类打开/关闭点击行：

$("#btn-deactivate").click(event)
{
  var target = $( event.currentTarget );
      var targetRow= target.closest( 'tr' );
 if (targetRow.hasClass( "active" ))
 { 
     targetRow.removeClass( "active" ).addClass( "inactive" );
 }
 else
 {
     targetRow.removeClass( "inactive" ).addClass( "active" );
 }
}
相关文章：