Question

我在一些论坛中读到要使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来禁用，但我无法覆盖表格。

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

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

Answer 2

您必须将div disabler放在桌面上。

您可以通过绝对定位div来实现。我添加了一个新的div，tableContainer包含了disabler div和表，并且绝对定位了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

如何让html看起来禁用？

2 个答案: