“禁用”带有 Javascript 的 HTML 表格

Question

我最近在很多网站上都看到过这种做法，但似乎无法找到一个。本质上，我想在单击按钮时“禁用”整个面板（即 HTML 表格上的表单）。

我所说的禁用是指我不希望表格中的表单元素可用，并且我希望表格淡出。

我已经能够通过在桌子上放置一个“面纱”来实现这一点，其中带有一个绝对定位的 div，该 div 具有低不透明度的白色背景（因此您可以看到其后面的表格，但无法单击任何内容，因为 div就在它前面）。这还添加了我想要的褪色效果。但是，当我将面纱的高度设置为 100% 时，它只会达到屏幕的大小（不包括滚动），因此如果用户向上或向下滚动，他们会看到面纱的边缘，这并不漂亮。

我假设这通常是以不同的方式完成的。有没有人有一些建议作为实现这一目标的更好方法？

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;
}

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");
});

Answer 3

禁用 HTML 表格的内部元素也可以使用 指针来完成-events CSS 样式如下所示：

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

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

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

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
}

Answer 5

难道你不能用 JavaScript 找出该区域的高度（以像素为单位）吗？然后将面纱的高度设置为该数字？

我脑子里没有确切的代码，但 offsetHeight 可能可以解决问题

Answer 6

如果我错了，请有人纠正我，但我见过 Javascript 和一些衍生的 Javascript 库，它们有很多选项可以完成你想做的事情。我已经使用 jQuery 库做了一些类似的效果。

需要考虑的一件事是您到底想禁用什么。本质上，表不是交互式的，因此禁用表不会有太大作用。如果是您要禁用的表格内的表单元素。您可以使用 JavaScript 来完成此操作。

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

一个例子是使用 JavaScript 更改字体和边框以及表格中其他非交互式元素的颜色，以提供禁用的“外观”。当然，您仍然需要使用 JavaScript 来禁用表单元素。