Nin*_*Boy 5 javascript css html-table
我在一些论坛中读到,要使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来做禁用但我不能让它覆盖表.
请帮我解决一下这个.我对这件事情很陌生.
Rob*_*b W 15
如果您希望disabler元素覆盖表格,请为其添加负底边距.此外,设置opacity为低于1的值,以不完全覆盖(隐藏)其后面的表.
#disabler {
opacity: 0.5;
margin-bottom: -200px;
}
既然你已经提到你出于教育目的这样做了,我就不会给出完整的解决方案.见这个小提琴上手.
如果要使文本看起来"不可选",请使用以下CSS:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;