Javascript 如何禁用 HTML 表格的所有行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34810013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable all rows of HTML table?
提问by st_stefanov
[Not exactly the same as the question "how to disable knockout click...". My question involves specific usage of an HTML table and contains valuable approaches on solving such case.]
[与“如何禁用淘汰赛点击...”的问题不完全相同。我的问题涉及 HTML 表的特定用法，并包含解决此类情况的宝贵方法。]
I have the following table and button below it:
我有下表和它下面的按钮：
<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>
The table rows are clickable (and would load some details data in another table).
On click of the button I need to disable all table rows and add one new <tr>on top.
I know how to add the new record on top:
表格行是可点击的（并且会在另一个表格中加载一些细节数据）。
单击按钮时，我需要禁用所有表行并<tr>在顶部添加一个新行。
我知道如何在顶部添加新记录：
$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');
But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?
但是如何禁用表格的所有行，以便它们不可点击并且看起来被禁用（变灰）？
回答by FleGMan
Just add disabledclass to your <tr>'s using $("tr").addClass("disabled").
只需将disabled类添加到您<tr>的 using 中$("tr").addClass("disabled")。
The grayed out backgroung can be added by using $('tr').css('background-color','grey')or by describing .disabledclass in your css-file:
可以$('tr').css('background-color','grey')通过.disabled在 css 文件中使用或描述类来添加变灰的背景：
tr.disabled {
background-color: grey;
}
Then in your ShowDetails()method just check if calling element has the .disabledclass by using $(this).hasClass("disabled")method. Show details if it doesn't and do nothing if it does.
然后在您的ShowDetails()方法中，只需.disabled使用$(this).hasClass("disabled")方法检查调用元素是否具有该类。如果没有，则显示详细信息，如果有，则不执行任何操作。
Instead of checking the disabled class you can also add a new bool observable named AddMode()and set it to true on Add New button click, and on ShowDetails()put a first line if(AddMode() === true) return;(by @st_stefanov)
除了检查禁用的类，您还可以添加一个名为的新 bool observableAddMode()并将其在 Add New 按钮单击时设置为 true，然后ShowDetails()放置第一行if(AddMode() === true) return;（by @st_stefanov）
回答by JustLearning
$(function (){
var myDisableBtn = $('#btn');
myDisableBtn.on('click',function (){
$('tr').css({'pointer-events':'none',
'background-color':'grey'});
});
});
回答by Jobelle
$(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>
