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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

У меня нет точного кода в голове, но offsetHeight может сделать трюк

Ответ 2

Вы можете попробовать 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

Попробуйте выполнить следующие действия с помощью JQuery

$("#freez").click(function(){
    $('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
    $('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});

Ответ 4

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

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

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

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

Ответ 5

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

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

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

let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);