使用Javascript禁用HTML表格

Question

最近我在很多网站上看到了这样的操作，但是却找不到一个。 我想要的是在单击按钮时“禁用”整个面板（该面板位于HTML表格中）。

所谓禁用是指我不希望表格内的表单元素可用，并且我希望表格变得模糊不清。

我能够通过在表格上加一个绝对定位的div，在其上设置白色背景和低不透明度的方式来实现此目的（因此您可以看到其后面的表格，但无法单击任何内容，因为该div在其前面）。 这也增加了我想要的淡出效果。 但是，当我将veil的高度设置为100％时，它仅适合我的屏幕大小（不包括滚动），因此如果用户向上或向下滚动，他们会看到veil的边缘，这不美观。

我假设这通常以不同的方式完成。 有人有更好的建议吗？

- Blair Jones

Answer 1

您可以尝试使用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;
}

- Soumya

---

您实际上缺少 button、select 和 textarea。这些也可能需要被禁用。 - Ismael Miguel

Answer 2

使用Jquery尝试以下操作

$("#freez").click(function(){
    $('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
    $('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});

- Satya

---

不要使用那个冗长的列表，你可以使用 :input。这样会有一些性能损失，但不会太大。可能... - Ismael Miguel

Answer 3

使用CSS样式pointer-events，也可以禁用HTML表格的内部元素，如下所示：

table[disabled], table[disabled] input { pointer-events: none }

在我们的JavaScript代码中的任何需要的位置，我们可以向父表格添加disabled属性，这将使CSS样式生效:

let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);

- RBT

---

这应该是答案。 - dns_nx

Answer 4

另一种方法是使用不透明度属性。

function disablePanel(id) {
   var panel = document.getElementById(id);
   var inputs = panel.querySelectorAll('input, button'); //anything else can go in here
   for (var i=0; i<inputs.length; i++) {
      inputs[i].disabled = true;
   }

   panel.style.opacity = 0.3; //or any other value
}

- blaze9

Answer 5

如果我错了，请有经验的人纠正我，但我见过很多选项来完成您想要做的事情的Javascript和一些派生Javascript库。 我已经使用jQuery库来实现一些类似的效果。

需要考虑的一件事是您要禁用的确切内容。基本上，表格是不交互的，因此禁用表格并没有太大作用。 如果您想要禁用表格中的表单元素，您可以使用JavaScript来完成。

除了使用JavaScript来禁用表单元素之外，您还可以使用它来更改非交互元素的属性。

例如，使用JavaScript更改表格中字体颜色、边框和其他非交互元素的颜色，从视觉上给人“残疾”的感觉。 当然，您仍然需要使用JavaScript来禁用表单元素。

- TheJediCowboy

Answer 6

你不能用JavaScript找出区域的像素高度吗？然后将遮罩的高度设置为该数字？

我脑海中没有确切的代码，但offsetHeight可能会起作用。

- Karl Johan

---

我最终发现文档的高度，并使用它来将面纱拉伸到整个页面，而不仅仅是使用100％：document.documentElement.clientHeight; - Blair Jones