使用JavaScript“禁用”HTML表格

最近我在很多网站上看到了这一点，但似乎无法跟踪其中一个。基本上我想在点击一个按钮时“禁用”整个面板（这是HTML表格中的表单）。使用JavaScript“禁用”HTML表格

通过禁用我的意思是我不希望表中的表单可用，我希望表淡出。

我已经能够通过在桌子上放置一个带有绝对定位的div的遮罩来实现这个功能，该div具有低透明度的白色背景（所以你可以看到它后面的表格，但不能点击因为div就在它的前面）。这也增加了我想要的淡化效果。但是，当我将面纱的高度设置为100％时，它只能达到我的屏幕的大小（不包括滚动），所以如果用户向上或向下滚动，他们会看到面纱的边缘，这并不漂亮。

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

来源

2010-04-30 Blair Jones

难道你不能找出用JavaScript的像素的高度区域？然后将面纱的高度设置为那个数字？

我没有确切的代码在我的头上，但的offsetHeight可能做的伎俩

来源

2010-04-30 06:44:12

我尝试以下最终找出了文档的高度，并使用它在整个页面上展开面纱，而不是仅使用100％：document.documentElement.clientHeight; – 2010-04-30 07:11:02

有人请纠正我，如果我错了，但我已经看到了Javascript和一些衍生Javascript库，有很多选项来完成你想做的事情。我用jQuery库来做一些类似的效果。

有一件事要考虑的是你究竟想要禁用什么。实质上，表格不是交互式的，所以禁用表格不会有太大的成就。如果它是要禁用的表格中的表单元素。您可以使用JavaScript完成此操作。

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

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

来源

2010-04-30 06:43:19 TheJediCowboy

你可以尝试类似的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; 
}

来源

2010-04-30 06:45:53 Soumya

我有类似的问题。这个解决方案为我工作。感谢 – Dee 2010-07-23 06:57:14

你实际上缺少'button'，'select'和'textarea's。那些可能也需要被禁用。 – 2017-05-28 17:55:52

与jQuery

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

来源

2012-01-04 11:03:38 Satya

而不是那个长列表，你可以使用'：input'。会有一些性能损失，但不是那么多。也许... – 2017-05-28 17:56:28

使用JavaScript“禁用”HTML表格

回答

相关问题