«Отключение» HTML-таблицы с помощью Javascript - PullRequest
Новая
       21

«Отключение» HTML-таблицы с помощью Javascript

10 голосов
/ 30 апреля 2010

Я видел, как это было сделано на многих сайтах в последнее время, но не могу отследить один. По сути, я хочу «отключить» всю панель (которая находится в форме таблицы HTML) при нажатии кнопки.

Под отключением я подразумеваю, что я не хочу, чтобы элементы формы в таблице были пригодными для использования, и я хочу, чтобы таблица как бы исчезла.

Я смог сделать это, поместив «вуаль» на стол с абсолютно позиционированным div, который имеет белый фон с низкой непрозрачностью (так что вы можете видеть таблицу позади него, но не можете ничего щелкать потому что div перед ним). Это также добавляет поблекший эффект, который я хочу. Тем не менее, когда я устанавливаю высоту завесы на 100%, она зависит только от размера моего экрана (не считая прокрутку), поэтому, если пользователь прокручивает вверх или вниз, он видит край завесы, и это не красиво.

Я предполагаю, что это обычно делается по-другому. У кого-нибудь есть предложения, как сделать это лучше?

Ответы [ 5 ]

6 голосов
/ 30 апреля 2010

Вы можете попробовать javascript как: 

function disable(table_id)
{
    var inputs=document.getElementById(table_id).getElementsByTagName('input');
    for(var i=0; i<inputs.length; ++i)
        inputs[i].disabled=true;
}
3 голосов
/ 04 января 2012

Попробуйте ниже с Jquery 

$("#freez").click(function(){
    $('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
    $('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});
0 голосов
/ 11 января 2019

Отключение внутренних элементов таблицы HTML также можно выполнить с помощью pointer-events Стиль CSS, как показано ниже: 

table[disabled], table[disabled] input { pointer-events: none }

В любой желаемой точке в нашей логике кода JavaScript мы можем добавить атрибут disabled в родительскую таблицу, как показано ниже, что приведет в действие CSS-стиль: 

let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);
0 голосов
/ 30 апреля 2010

Разве вы не можете просто узнать высоту области в пикселях с помощью JavaScript? А затем установить высоту завесы на это число?

У меня нет точного кода в моей голове, но offsetHeight может помочь

0 голосов
/ 30 апреля 2010

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

Надо подумать о том, что именно вы пытаетесь отключить. По сути, таблицы не являются интерактивными, поэтому отключение таблицы не принесет многого. Если это элементы формы в таблице, которую вы хотите отключить. Вы можете сделать это с помощью JavaScript.

Наряду с использованием JavaScript для отключения элементов формы вы также можете использовать его для изменения свойств неинтерактивных элементов.

Примером этого может быть использование JavaScript для изменения цвета шрифта и границ, а также других неинтерактивных элементов в таблице для придания «видимости» отключенности. Конечно, вам все еще нужно использовать JavaScript для отключения элементов формы.

...