Как заставить HTML выглядеть отключенным? - PullRequest
Новая
       0

Как заставить HTML выглядеть отключенным?

5 голосов
/ 27 октября 2011

Я читал на некоторых форумах, что для того, чтобы сделать HTML-таблицу отключенной, нужно добавить слой div. Моя проблема в том, что я не знаю, как это сделать.

У меня есть 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 для отключения, но я не могу сделать так, чтобы оно покрывало таблицу.

Пожалуйста, помогите мне с этим. Я так новичок в этом деле.

Ответы [ 2 ]

15 голосов
/ 27 октября 2011

Если вы хотите, чтобы элемент 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;
1 голос
/ 27 октября 2011

Вам нужно будет поставить div disabler поверх стола.

Вы можете сделать это, просто поместив div. Я добавил новый div, tableContainer, охватывающий div блокировщика и таблицу, и абсолютно позиционирующий 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";
}

Live Пример: http://jsbin.com/icuwug

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...