Блог

Главная - Вопросы по программированию - вставка таблицы с помощью функции onclick JS

вставка таблицы с помощью функции onclick JS

#javascript #onclick

#javascript #onclick

Вопрос:

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

Комментарии:

1. Вы должны добавить любой соответствующий код вместе со своим вопросом.

2. Просто поместите таблицу в HTML со display: none стилем. Когда кнопка нажата, измените ее на display: block , и она отобразится.

3. Пожалуйста, добавьте код к вашему вопросу, чтобы предоставить контекст

Ответ №1:

Самый простой способ — добавить таблицу с классом ‘hide’, например:

 <button id='toggleTable'>
  show/hide table
</button>
<table class='hide' id='tableTarget'>
...
</table>

js:

 
document.addEventListener('DOMContentLoaded', () => {
  document
    .querySelector('#toggleTable')
    .addEventListener(
      'click', 
      () => {
        document
          .querySelector('#tableTarget')
          .classList
          .toggle('hide')
      },
      false
    )
  },
  false
)

css:

 .hide {
  display: none !important;
}

если вы используете какой-либо интерфейс, фреймворк должен быть проще. Но это с простым html / js / css. И IE9 не поддерживается этим решением. Если вам это нужно, вам придется немного изменить код js.

Удачи!