javascript 如何使 html 看起来被禁用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7916734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make html look disabled?
提问by NinjaBoy
I read in some forums that to make an html table look disabled is to add a layer of div. My problem is I don't know how to do it.
我在一些论坛上读到，要使 html 表看起来禁用是添加一层 div。我的问题是我不知道该怎么做。
I have 3 questions:
我有3个问题：
How will I set the div height that it will automatically adjust to the table height whenever the table increases its height when a new row is added.
How will I make the div cover the table. I don't know how to layer html elements.
How am I going to code the javascript that will make my table look disabled when I click 'Disable' button and enable it again when I click 'Enable' button.
我将如何设置 div 高度，当添加新行时表格增加其高度时，它将自动调整为表格高度。
我将如何使 div 覆盖桌子。我不知道如何对 html 元素进行分层。
我将如何编写 javascript 代码，当我单击“禁用”按钮时使我的表格看起来被禁用，并在我单击“启用”按钮时再次启用它。
tabledisabletest.html
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>
I have the div disablerto do the disabling but I can't make it cover the table.
我有 divdisabler来做禁用，但我不能让它覆盖桌子。
Please help me with this. I'm so new to this thing.
请帮我解决一下这个。我对这件事很陌生。
回答by Rob W
If you want the disablerelement to overlay your table, add a negative bottom-margin to it. Also, set opacityto a value lower than 1, to not completely cover (hide) the table behind it.
如果您希望disabler元素覆盖您的表格，请为其添加一个负的下边距。此外，设置opacity为小于 1 的值，以不完全覆盖（隐藏）其后面的表格。
#disabler {
opacity: 0.5;
margin-bottom: -200px;
}
Since you've mentioned that you're doing this for educative purposes, I won't give the full solution. See this fiddleto get started.
由于您提到您这样做是出于教育目的，因此我不会提供完整的解决方案。请参阅此小提琴以开始使用。
If you want to make a text look "unselectable", use the following CSS:
如果您想让文本看起来“不可选择”，请使用以下 CSS：
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
回答by Nivas
You will have to place the divdisableron top of the table.
你必须把它divdisabler放在桌子的顶部。
You can do so by absolutely positioning the div. I added a new div, tableContainer enveloping the disabler div and the table, and absolutely positioning the div.
您可以通过绝对定位div. 我添加了一个新的 div，tableContainer 包围了禁用 div 和 table，并且绝对定位了 div。
<div id="tableContainer"> <!-- New Div-->
<div id="disabler"></div>
<table>....<table>
</div>
Add position: absolute;to the #disabler
添加position: absolute;到#disabler
And most importantlywrite the javascript to display and hide the div:
而且最重要的编写JavaScript来显示和隐藏的div：
function disableTable()
{
document.getElementById("disabler").style.display = "block";
}
function enableTable()
{
document.getElementById("disabler").style.display = "none";
}
Live Example: http://jsbin.com/icuwug
现场示例：http: //jsbin.com/icuwug
