Как добавить строку в таблице с помощью JS?

Question

Как добавить строку в таблице с помощью JS?

Рейтинг: 0Ответов: 2Опубликовано: 19.07.2023

$При методе function addRow() { let table = document.getElementById("mine_info"); table.insertRow(); При нажатии на кнопку появляется пустая область, а не строка$ При методе function addRow() {let table = document.getElementById("mine_info"); table.insertRow(); При нажатии на кнопку появляется пустая область, а не строкаЕсть таблица:

<tr>
        <th>№ п/п</th>
        <th>Какая-то инфа/th>
        <th>Какая-то инфа</th>
        <th>Какая-то инфа</th>
        <th>Какая-то инфа</th>
        <th>Какая-то инфа</th>
    </tr>
    <tr>
        <td><p>Какая-то инфа</p></td>
        <td><p>1</p></td>
        <td><p>Какая-то инфа</p></td>
        <td><p>Какая-то инфа</p></td>
        <td><p>Какая-то инфа</p></td>
        <td><p>Какая-то инфа/p></td>
    </tr>
    <input class="button" type='button' value='Добавить'>

Хочу чтобы при нажатии на кнопку на кнопку добавлялась пустая новая строка. Куда я потом что-то запишу.

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 4Принят

Используйте метод insertRow()

function addRow() {
  let table = document.getElementById("myTable");
  let row = table.insertRow();
  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  let cell3 = row.insertCell(2);
  let cell4 = row.insertCell(3);
  let cell5 = row.insertCell(4);
  let cell6 = row.insertCell(5);
  cell1.innerHTML = "№";
  cell2.innerHTML = "Какая-то инфа";
  cell3.innerHTML = "Какая-то инфа";
  cell4.innerHTML = "Какая-то инфа";
  cell5.innerHTML = "Какая-то инфа";
  cell6.innerHTML = "Какая-то инфа";
}

<table id="myTable">
  <tbody>
    <tr>
      <th>№ п/п</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
    </tr>
    <tr>
      <td>
         <p>1</p>
      </td>
      <td>
         <p>Какая-то инфа</p>
      </td>
      <td>
        <p>Какая-то инфа</p>
      </td>
      <td>
        <p>Какая-то инфа</p>
      </td>
      <td>
        <p>Какая-то инфа</p>
      </td>
      <td>
        <p>Какая-то инфа</p>
      </td>
    </tr>
  </tbody>
</table>
<input class="button" type='button' value='Добавить'>

Answer 2

▲ 2

Хочу чтобы при нажатии на кнопку на кнопку добавлялась пустая новая строка. Куда я потом что-то запишу

Такое можно проделать таким образом...

document.querySelector('button').addEventListener('click', _ => {
  const table = document.getElementById("myTable");
  const r = document.createElement('tr')
  table.querySelectorAll('th').forEach(_ => r.insertCell().innerHTML = '<br />')
  table.querySelector('tbody').insertAdjacentElement('beforeend', r)
})

<table id="myTable" border='1'>
  <thead>
    <tr>
      <th>№ п/п</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
      <th>Какая-то инфа</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<button>Добавить</button>

Как добавить строку в таблице с помощью JS?

Ответы