Question

[与“如何禁用击倒点击......”的问题不完全相同。我的问题涉及HTML表的具体用法，并包含解决此类案例的有价值的方法。]

我下面有下表和按钮：

<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>

表行是可点击的（并且会在另一个表中加载一些细节数据）点击按钮后，我需要禁用所有表格行，并在顶部添加一个新的<tr> 我知道如何在顶部添加新记录：

$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');

但是如何禁用表格的所有行，以便它们不会被点击并且看起来已禁用（灰显）？

Answer 1

只需使用disabled将<tr>课程添加到$("tr").addClass("disabled")。

可以使用$('tr').css('background-color','grey')或在css文件中描述.disabled类来添加灰显的背景信息：

tr.disabled {
    background-color: grey;
}

然后在ShowDetails()方法中，使用.disabled方法检查调用元素是否具有$(this).hasClass("disabled")类。如果没有则显示详细信息，如果没有则不执行任何操作。

您还可以添加一个名为AddMode()的新bool可观察对象，并在添加新按钮单击时将其设置为true，而在ShowDetails()上放置第一行if(AddMode() === true) return;，而不是检查已禁用的类。（by @st_stefanov）

Answer 2

$(function (){
     var myDisableBtn = $('#btn');
     myDisableBtn.on('click',function (){

       $('tr').css({'pointer-events':'none',
                    'background-color':'grey'});

     });
});

Answer 3

$(document).ready(function () {
        $('#btn').click(function () {
            $('#test_table tr').prop('disabled', 'disabled').css('background-color', 'grey');

            $('#test_table tbody').prepend('<tr><td contenteditable="true">New Record Here</td></tr>')
        });
    });


 <input type="button" id="btn" value="Add New Record"/>
    <table style="width:100%" id="test_table">
        <tbody>
  <tr>
    <td>Jill</td>
  </tr>
  <tr>
    <td>Eve</td>
  </tr>
            </tbody>
</table>

Answer 4

我使用此CSS代码禁用了HTML行

.row-disabled {
   background-color: rgba(236, 240, 241, 0.5);
   pointer-events: none;
   width: 100%;
}

如何禁用HTML表的所有行？

4 个答案: