如何使HTML看起來被禁用？

我在一些論壇上看到，禁用html表格是爲了添加一層div。我的問題是我不知道該怎麼做。如何使HTML看起來被禁用？

我有3個問題：

1）我將如何設置DIV的高度，它會自動調整表高度每當表增加了它的高度時，增加了一個新的行。

2.）我將如何讓div覆蓋表格。我不知道如何分層html元素。

3.）當我點擊'禁用'按鈕並點擊'啓用'按鈕後再次啓用它，我該如何編寫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做禁用，但我不能讓它覆蓋表。

請幫我這個。我對這件事很陌生。提前致謝。

來源

2011-10-27 NinjaBoy

建議：使用jQuery BlockUI 。演示：http://jquery.malsup.com/block/#demos – Dev

我想我需要先學習本地JavaScript，然後再跳入某些高級技術。此外，我需要學習JavaScript，因爲我需要準備考試。 – NinjaBoy

究竟是什麼意思，使其*看起來禁用*？用戶還可以從中選擇文本嗎？它是否需要在禁用控件上看到這些邊框和陰影效果？ –

如果您希望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;

來源

2011-10-27 14:00:33

謝謝，但我怎麼會讓它自動調整，當一個新行插入表中。 – NinjaBoy

@ChickenBoy使用JavaScript。元素的'height'可以通過'element.style.height = height +「px」;'（其中'height'是一個數字）''來改變。要獲取元素的大小，請使用'element.offsetHeight'。 **請參閱http://jsfiddle.net/RAb8b/1/**瞭解更多JavaScript代碼。 **再一次：我沒有展示完整的解決方案，*只是*有用的提示**，以便您學到一些東西。學習的最佳方式是獲取經驗和犯錯誤。 –

非常感謝。你真是太好了！ – NinjaBoy

你將不得不放置divdisabler在桌子上。

您可以絕對定位div。我添加了一個新的div，包含disabler div和table的tableContainer，並且絕對定位了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

來源

2011-10-27 14:01:22 Nivas

如何使HTML看起來被禁用？

回答

相關問題