Question

我有一个表，其值已循环使用，并且我试图用来停用该行的每一行中的按钮如果点击：

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

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

Answer 1

在表格行添加活动类。

      <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 =＆＃34; active＆＃34;：

时，才点击活动行

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

siwitch on / off通过改变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" );
 }
}

C＃MVC在单击时停用（禁用）表行

1 个答案: