如何使 html 看起来被禁用？答案

【问题标题】：How to make html look disabled?如何使 html 看起来被禁用？
【发布时间】：2011-12-16 12:49:11
【问题描述】：

我在一些论坛上读到，要使 html 表格看起来被禁用是添加一个 div 层。我的问题是我不知道该怎么做。

我有 3 个问题：

如何设置 div 高度，以便在添加新行时表格增加高度时自动调整为表格高度。
如何让 div 覆盖表格。我不知道如何分层 html 元素。
我将如何编写 javascript 代码，使我的表格在我单击“禁用”按钮时看起来被禁用，并在我单击“启用”按钮时再次启用它。

tabledisabletest.html

<html>
<head>
<script type="text/javascript">

</script>
<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest tr.highlight td {
  background-color: #8888ff;
 }

 table#tblTest tr.normal {
  background-color: #ffffff;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }

 #disabler {
  width: 100%;
  height: 200px;
  background-color: #bbb;
  opacity:0.6;
 }
</style>
</head>

<body>

 <div id="disabler"></div>

 <table id="tblTest">
  <thead>
   <tr>
    <th>Name</th>
    <th>Address</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tom</td>    
    <td>UK </td>
   </tr>
   <tr>
    <td>Henrik</td> 
    <td>Denmark</td>
   </tr>
   <tr>
    <td>Lionel</td> 
    <td>Italy</td>
   </tr>
   <tr>
    <td>Ricardo</td>    
    <td>Brazil</td>
   </tr>
   <tr>
    <td>Cristiano</td>  
    <td>Portugal</td>
   </tr>
  </tbody>
 </table>
 <input type="button" onclick="disable = true;" value="Disable" />
 <input type="button" onclick="disable = false;" value="Enable" />
</body>
</html>

我有 div disabler 来禁用，但我不能让它覆盖桌子。

请帮我解决这个问题。我对这件事很陌生。

【问题讨论】：

建议：使用 jQuery BlockUI。演示：jquery.malsup.com/block/#demos
我想我需要先学习原生 javascript，然后再学习一些高级技术。我还需要学习javascript，因为我需要准备考试。
让它看起来被禁用到底是什么意思？用户仍然可以从中选择文本吗？它是否需要具有您在禁用控件上看到的那些边框和阴影效果？
是否可以禁用文本选择？我想让它看起来像一个禁用的控件。

标签： javascript css html-table

【解决方案1】：

如果您希望disabler 元素覆盖您的表格，请为其添加一个负的下边距。此外，将 opacity 设置为小于 1 的值，以不完全覆盖（隐藏）它后面的表格。

 #disabler {
     opacity: 0.5;
     margin-bottom: -200px;
 }

既然你提到你这样做是为了教育目的，我不会给出完整的解决方案。请参阅 this fiddle 以开始使用。

如果您想让文本看起来“不可选择”，请使用以下 CSS：

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

【讨论】：

谢谢，但是当表格中插入新行时，我如何让它自动调整。
@ChickenBoy 使用 JavaScript。可以使用element.style.height = height + "px";（其中height 是一个数字）. To get the size of an element, use element.offsetHeight 来更改元素的height。 请参阅jsfiddle.net/RAb8b/1 了解更多 JavaScript 代码。 再次重申：我没有展示完整的解决方案，只是有用的提示，以便您学习一些东西。最好的学习方式是积累经验和犯错误。

【解决方案2】：

您必须将div disabler 放在桌子的顶部。

您可以通过绝对定位div 来做到这一点。我添加了一个新的 div，tableContainer 包围了禁用 div 和 table，并且绝对定位了 div。

<div id="tableContainer">   <!-- New Div-->
   <div id="disabler"></div>
   <table>....<table>
</div>

将position: absolute; 添加到#disabler

并且最重要的是编写javascript来显示和隐藏div：

function disableTable()
{
  document.getElementById("disabler").style.display = "block";
}

function enableTable()
{
  document.getElementById("disabler").style.display = "none";
}

实时示例：http://jsbin.com/icuwug

【讨论】：