使用 Javascript“禁用”HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2742627/
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
"Disabling" an HTML table with Javascript
提问by Blair Jones
I've seen this done in a lot of sites recently, but can't seem to track one down. Essentially I want to "disable" an entire panel (that's in the form on an HTML table) when a button is clicked.
我最近在很多网站上都看到了这一点，但似乎无法找到一个。本质上，我想在单击按钮时“禁用”整个面板（在 HTML 表格中的表单中）。
By disable I mean I don't want the form elements within the table to be usable and I want the table to sort of fade out.
禁用我的意思是我不希望表格中的表单元素可用，我希望表格淡出。
I've been able to accomplish this by putting a "veil" over the table with an absolutely positioned div that has a white background with a low opacity (so you can see the table behind it, but can't click anything because the div is in front of it). This also adds the faded effect that I want. However, when I set the height of the veil to 100% it only goes to the size of my screen (not including the scrolling), so if a user scrolls up or down, they see the edge of the veil and that's not pretty.
我已经能够通过在桌子上放置一个“面纱”来实现这一点，该 div 具有绝对定位的 div，该 div 具有白色背景和低不透明度（因此您可以看到它后面的表格，但无法单击任何东西，因为 div在它前面）。这也增加了我想要的褪色效果。但是，当我将面纱的高度设置为 100% 时，它只会达到我的屏幕大小（不包括滚动），因此如果用户向上或向下滚动，他们会看到面纱的边缘，这并不漂亮。
I'm assuming this is typically done in a different fashion. Does anyone have some suggestions as a better way to accomplish this?
我假设这通常以不同的方式完成。有没有人有一些建议作为实现这一目标的更好方法？
采纳答案by Karl Johan
Can't you just find out the height of the area in pixels with JavaScript? And then set the veil's height to that number?
你不能用 JavaScript 找出区域的高度（以像素为单位）吗？然后将面纱的高度设置为那个数字？
I don't have the exact code in my head but offsetHeight might do the trick
我脑子里没有确切的代码，但 offsetHeight 可能会起作用
回答by Soumya
You could try javascript like:
您可以尝试使用 javascript，例如：
function disable(table_id)
{
var inputs=document.getElementById(table_id).getElementsByTagName('input');
for(var i=0; i<inputs.length; ++i)
inputs[i].disabled=true;
}
回答by Satya
Try the below with Jquery
用 Jquery 试试下面的
$("#freez").click(function(){
$('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
$('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});
回答by RBT
Disabling the inner elements of an HTML table can also be done using pointer-eventsCSS style as shown below:
也可以使用指针事件CSS 样式来禁用 HTML 表格的内部元素，如下所示：
table[disabled], table[disabled] input { pointer-events: none }
At any desired point in our JavaScript code logic, we can add disabledattribute to the parent table as shown below which will bring the CSS styling into effect:
在 JavaScript 代码逻辑中的任何所需点，我们可以disabled向父表添加属性，如下所示，这将使 CSS 样式生效：
let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);
回答by TheJediCowboy
Somebody please correct me if I am wrong, but I have seen Javascript and some derivate Javascript libraries that have a lot of options for accomplishing for what you would like to do. I have used the jQuery library to do some similar effects.
如果我错了，请有人纠正我，但我已经看到 Javascript 和一些派生的 Javascript 库，它们有很多选项可以完成您想做的事情。我已经使用 jQuery 库做了一些类似的效果。
One thing to think about is what exactly you are trying to disable. Essentially tables are not interactive so disabling a table would not accomplish much. If it is the form elements within the table you want to disable. You can accomplish this using JavaScript.
要考虑的一件事是您究竟要禁用什么。基本上表格不是交互式的，因此禁用表格不会有太大作用。如果它是您要禁用的表格中的表单元素。您可以使用 JavaScript 完成此操作。
Along with using JavaScript for disabling the form elements, you can also use it to change properties of the non interactive elements.
除了使用 JavaScript 禁用表单元素外，您还可以使用它来更改非交互元素的属性。
An example of this would be using JavaScript to change the color of the font and borders and other non interactive elements in the table to give the "look" of being disabled. Of course you still need to use JavaScript to disable the form elements.
一个例子是使用 JavaScript 更改表格中的字体和边框以及其他非交互式元素的颜色，以提供被禁用的“外观”。当然，您仍然需要使用 JavaScript 来禁用表单元素。
