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

Question

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

私はいくつかのフォーラムで、HTMLテーブルの表示を無効にすることをdivのレイヤーを追加することを読んだ。私の問題は、どうやってそれをするのか分からないことです。

私は3つの質問があります：

1.）新しい行が追加されたときにテーブルの高さが増えるたびに、テーブルの高さに自動的に調整するdivの高さを設定する方法を教えてください。

2.）どのように私はdivのテーブルをカバーするようになります。私はhtml要素をレイヤーする方法を知らない。

3.）「無効にする」ボタンをクリックしたときにテーブルの表示を無効にし、「有効にする」ボタンをクリックしたときに再度有効にするJavaScriptをコード化する方法を教えてください。

tabledisabletest.html

<html>
<head>
<script type="text/javascript">

</script>

</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 がありますが、テーブルをカバーすることはできません。

これで私を助けてください。私はこのことを初めて知りました。前もって感謝します。

5

追加された 27 10月 2011 〜で 01:41 著者 NinjaBoy 編集された 16 11月 2011 〜で 05:29

ビュー: 49

源

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

追加された 27 10月 2011 〜で 01:49, 著者 Salman A, 源

提案：jQuery BlockUIを使用します。デモ： jquery.malsup.com/block/#demos

追加された 27 10月 2011 〜で 01:45, 著者 Dev, 源

私はいくつかの高度な技術に飛び込む前にネイティブのjavascriptを最初に学ぶ必要があると思う。また、私は試験の準備をする必要があるので、私はjavascriptを学ぶ必要があります。

追加された 27 10月 2011 〜で 01:49, 著者 NinjaBoy, 源

テキストの選択を無効にすることはできますか？私はそれを無効にしたコントロールのように見せたい。

追加された 27 10月 2011 〜で 01:51, 著者 NinjaBoy, 源

2 答え

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;

14

追加された 27 10月 2011 〜で 02:00 著者 Rob W

源

@ChickenBoy JavaScriptを使用します。要素の height は、 element.style.height = height + "px"; （ height は数字です）を使用して変更できます<コード>。要素のサイズを取得するには、 element.offsetHeight`を使用します。 追加のJavaScriptコードについては、 jsfiddle.net/RAb8b/1 をご覧ください。もう一度：私はあなたに何かを学ぶために、役に立つヒントという完全な解決策を提示していません。学習する最善の方法は、経験を積むことと間違いを犯すことです。

追加された 27 10月 2011 〜で 02:09, 著者 Rob W, 源

@ChickenBoyあなたは大歓迎です。テストうまくいくといいね ;）

追加された 27 10月 2011 〜で 02:14, 著者 Rob W, 源

ありがとうございますが、テーブルに新しい行が挿入されたときに自動的に調整する方法を教えてください。

追加された 27 10月 2011 〜で 02:04, 著者 NinjaBoy, 源

本当にありがとう。あなたはとても助けになる！

追加された 27 10月 2011 〜で 02:12, 著者 NinjaBoy, 源

テーブルの上に div disabler を配置する必要があります。

div を絶対的に配置することでそうすることができます。私は新しいdivを追加しました。tableContainerはdisabler divとtableを囲み、絶対的にdivを配置します。

<div id="tableContainer">  <div id="disabler"></div> <table>....<table> </div>

Add position: absolute; to the #disabler

And most importantly write the JavaScript to display and hide the div:

function disableTable() { document.getElementById("disabler").style.display = "block"; } function enableTable() { document.getElementById("disabler").style.display = "none"; }

Live Example: http://jsbin.com/icuwug

1

追加された 27 10月 2011 〜で 02:01 著者 Nivas

源

著者 Nivas · Answer 1 · 2011-10-27T02:01Z

テーブルの上に div disabler を配置する必要があります。

div を絶対的に配置することでそうすることができます。私は新しいdivを追加しました。tableContainerはdisabler divとtableを囲み、絶対的にdivを配置します。

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

Add position: absolute; to the #disabler

And most importantly write the JavaScript to display and hide the div:

function disableTable()
{
  document.getElementById("disabler").style.display = "block";
}

function enableTable()
{
  document.getElementById("disabler").style.display = "none";
}

Live Example: http://jsbin.com/icuwug