html表示を無効にするにはどうすればよいですか？

いくつかのフォーラムでは、HTML表の表示を無効にするために、divのレイヤーを追加することをお伝えします。私の問題は、どうやってそれをするのか分からないことです。 html表示を無効にするにはどうすればよいですか？

は、私は3つの質問を持っている：私は、新しい行が追加されたとき、テーブルはその高さを増加させたときに、それが自動的にテーブルの高さに調整しますdivの高さを設定しますどのように

1）。

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を

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

#disabler

そして、最も重要なのにposition: absolute;を追加表示し、div要素を非表示にJavaScriptを書きます。デモ：http://jquery.malsup.com/block/#demos – Dev

先進的な技術に飛び込む前にネイティブのJavaScriptを最初に学ぶ必要があると思います。また、私は試験の準備をする必要があるので、私はjavascriptを学ぶ必要があります。 – NinjaBoy

あなたはそれを*表示しないようにすることによって正確に何を意味しますか*？ユーザーはそれでもテキストを選択できますか？無効なコントロールに表示される境界線や影の効果が必要ですか？ –

disabler要素をテーブルにオーバーレイさせたい場合は、それにマイナスのボトムマージンを追加します。また、opacityを1より小さい値に設定すると、その背後の表を完全に隠すことはできません。

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

教育目的でこれを行っていると言われているので、私は完全な解決策を提示しません。開始するには、this fiddleを参照してください。あなたがテーブルの上にdisablerdivを配置する必要があります

-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'を使用します。 **追加のJavaScriptコードについてはhttp://jsfiddle.net/RAb8b/1/**を参照してください。 **もう一度：私は完全な解決策を提示していない、*ほんとうの有用なヒント**、あなたは何かを学ぶ。学習する最善の方法は、経験を積むことと間違いを犯すことです。 –

ありがとうございました。あなたはとても助けになる！ – NinjaBoy

：テキストは、「選択不可」に見えるようにしたい場合は

は、以下のCSSを使用します。

divを絶対配置することでそうすることができます。私は新しいdivを追加しました。tableContainerはdisabler divとtableを囲み、絶対的に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表示を無効にするにはどうすればよいですか？

答えて

関連する問題