Javascript 如何禁用HTML表的所有行？

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

我有下面的表格和按钮：

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

...
添加新记录

表格行是可单击的（并将在另一个表格中加载一些详细信息数据）。
单击按钮后，我需要禁用所有表格行，并在顶部添加一个新的

。
我知道如何在顶部添加新记录：

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

$（'newrecord Here'）.prependTo（'table>tbody'）；

---

但是如何禁用表中的所有行，使它们不会被单击并看起来被禁用（灰显）？

只需使用

$（“tr”）.addClass（“禁用”）

将

禁用的
类添加到
中即可

可以使用
$（'tr'）.css（'background-color'，'grey'）
或通过在css文件中描述
.disabled
类来添加灰色背景：

tr.disabled {
    background-color: grey;
}

然后在您的
ShowDetails（）
方法中，只需使用
$（this）.hasClass（“disabled”）
方法检查调用元素是否禁用了
.disabled
类。如果没有，则显示详细信息；如果有，则不执行任何操作

除了检查禁用的类，您还可以添加一个名为
AddMode（）
的新bool observable，并在单击addnew按钮时将其设置为true，然后在
ShowDetails（）
上放置第一行
if（AddMode（）==true）返回（由@st_stefanov编写）
$（文档）.ready（函数（）{
$（'#btn'）。单击（函数（）{
$（'#test_table tr'）.prop（'disabled'，'disabled'）.css（'background-color'，'grey'）；
$（'#test_table tbody'）。prepend（'此处有新记录'）
});
});
吉尔
前夕
我使用此CSS代码禁用HTML行

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

在表格上方添加任何背景色为
黑色和不透明度为
.5
的覆盖元素？！可能是重复的谢谢，A.沃尔夫。在这种情况下，我不能在整个表上添加背景色，因为我需要启用一行。有新记录的那一个。
已禁用
属性在交互元素上工作，它不是TR-one谢谢，你不知道类似这样的东西，是的。我要试一试。谢谢。除了检查禁用的类，我还可以添加一个名为AddMode（）的新bool observable，并在单击add new按钮时将其设置为true，在ShowDetails（）上，如果（AddMode（）==true）返回，我将在第一行显示；你觉得怎么样？太棒了。谢谢你的帮助，弗莱曼。我选择这个作为答案，因为它给出了我在问题细节中所有观点的完整解决方案。欢迎来到论坛，这对你来说是一个好的开始！继续往这边走！（斯坦）太棒了，真管用。现在，我必须找到一种方法来禁用禁用行的单击。。。。
$(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> 

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