Як зробити 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
Що саме ви маєте на увазі, змусивши його виглядати вимкненою ? Чи може користувач все-таки виділяти з нього текст? Чи потрібно мати ті межі та тіньові ефекти, які ви бачите на елементах керування інвалідами?
додано Автор Salman A, джерело
Пропозиція: скористайтеся jQuery BlockUI. Демо-версії: jquery.malsup.com/block/#demos
додано Автор Dev, джерело
Я думаю, що я повинен вивчати рідний JavaScript, перш ніж перейти до деяких передових технологій. Також мені потрібно навчитися JavaScript, оскільки мені потрібно підготуватися до іспиту.
додано Автор NinjaBoy, джерело
Чи можна відключити вибір тексту? Я хочу, щоб це виглядало як контроль відключення.
додано Автор 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
додано
@ChickenBoy Використовуйте JavaScript. height елемента можна змінити, використовуючи element.style.height = height + "px"; (де height - це число) < код>. Щоб отримати розмір елемента, використовуйте element.offsetHeight`. Перегляньте jsfiddle.net/RAb8b/1 для додаткового коду JavaScript. Знову ж таки: я не показую повне рішення, просто корисні підказки , щоб ви могли щось дізнатись. Найкращий спосіб вчитися - отримати досвід і вчинити помилки.
додано Автор Rob W, джерело
@ ChickenBoy Ви ласкаво просимо. Успіх на ваш іспит;)
додано Автор Rob W, джерело
Спасибі, але як я буду робити його автоматично, коли новий рядок вставляється в таблицю.
додано Автор NinjaBoy, джерело
Дуже дякую. Ти така велика допомога !!!
додано Автор NinjaBoy, джерело

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

Ви можете це зробити, абсолютно позиціонуючи div . Я додав новий div, tableContainer, що обгортає disabler div і таблицю, і абсолютно позиціонує 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

1
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram