Изменение или очистка html — таблицы с помощью JavaScript

#javascript #html #html-table #onchange

Вопрос:

Я использую следующий код для создания таблицы html и отправки ее на свою страницу:

 function generateTableHead(table, data) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    for (let key of data) {
      let th = document.createElement("th");
      let text = document.createTextNode(key);
      th.appendChild(text);
      row.appendChild(th);
    }
  }

function generateTable(table, data) {
    for (let element of data) {
      let row = table.insertRow();
      for (key in element) {
        let cell = row.insertCell();
        let text = document.createTextNode(element[key]);
        cell.appendChild(text);
      }
    }
  }
 

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

Ответ №1:

Мне здесь не хватает контекста, но вы можете очистить HTML-содержимое HTML-элемента, настроив innerHTML на пустое жало:

 const table = document.getElementById('table')
table.innerHTML = ''