Warm tip: This article is reproduced from serverfault.com, please click

javascript-如何禁用HTML表的所有行?

(javascript - How to disable all rows of HTML table?)

发布于 2016-01-15 11:26:42

[与“如何禁用敲除点击...”问题不完全相同。我的问题涉及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');

但是,如何禁用表中的所有行,使其不会被单击并看上去已禁用(显示为灰色)?

Questioner
st_stefanov
Viewed
0
FleGMan 2016-01-15 20:01:59

只需将disabled添加到你<tr>的使用中即可$("tr").addClass("disabled")

可以通过使用css文件中的类$('tr').css('background-color','grey')或通过描述.disabled来添加显示为灰色的背景

tr.disabled {
    background-color: grey;
}

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

除了检查禁用的类,你还可以添加一个新的bool observable AddMode(),并将其设置为true,然后单击Add New按钮并ShowDetails()放在第一行if(AddMode() === true) return;(@st_stefanov)