Динамическое добавление строк в таблицу HTML

Question

Нужно по кнопке добавлять строки в таблицу с содержимым которое раньше напишу в инпутах

То есть должны добавляться строки в вторую таблицу (она пустая, должно быть только <table><tbody></tbody></table>

Я думаю проблема в скрипте (хотя много раз переписывал его уже), подскажите что не так?

document.getElementById("myBtn").onclick = dodajWiersz;

function dodajWiersz() {
  var wiersz = document.createElement("tr");

  var tdNumer = document.createElement("td");
  var val1 = document.getElementById("liczba").value;
  document.getElementById(tdNumer).innerHTML = val1;

  var tdText = document.createElement("td");
  var val2 = document.getElementById("tekst").value;
  document.getElementById(tdText).innerHTML = val2;

  wiersz.appendChild(tdNumer);
  wiersz.appendChild(tdText);
  var dodac = document.getElementById("tbd");
  dodac.appendChild(wiersz);

}

<table class="dowolna_nazwa">
  <thead>
    <tr>
      <th>Numer porządkowy</th>
      <th>Nazwa epizodu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Epizod numer 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Epizod numer 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Epizod numer 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Epizod numer 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Epizod numer 5</td>
    </tr>
  </tbody>
</table>
<br>
<table class="dowolna_nazwa">
  <tbody id="tbd">
  </tbody>
</table>
<p align="center">Numer: <input type="number" id="liczba"></p>
<p align="center">Nazwa: <input type="text" id="tekst"></p>
<p align="center"><button id="myBtn">D o d a j</button></p>
<hr>

Answer 1

Метод document.getElementById() возвращает ссылку на элемент, который имеет атрибут id с указанным значением.

Из чего следует, что document.createElement("td") созданный вами элемент не имеет атрибута ID, и что более важно не имеет отношения к DOM элементам на этапе его создания, так как еще не находится на странице, а является переменной JS. Из-за чего и возникала ошибка.

document.getElementById("myBtn").onclick = dodajWiersz;

function dodajWiersz() {
  var wiersz = document.createElement("tr");

  var tdNumer = document.createElement("td");
  var val1 = document.getElementById("liczba").value;
  tdNumer.innerHTML = val1;

  var tdText = document.createElement("td");
  var val2 = document.getElementById("tekst").value;
  tdText.innerHTML = val2;

  wiersz.appendChild(tdNumer);
  wiersz.appendChild(tdText);
  var dodac = document.getElementById("tbd");
  dodac.appendChild(wiersz);

}

<table class="dowolna_nazwa">
  <thead>
    <tr>
      <th>Numer porządkowy</th>
      <th>Nazwa epizodu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Epizod numer 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Epizod numer 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Epizod numer 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Epizod numer 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Epizod numer 5</td>
    </tr>
  </tbody>
</table>
<br>
<table class="dowolna_nazwa">
  <tbody id="tbd">
  </tbody>
</table>
<p align="center">Numer: <input type="number" id="liczba"></p>
<p align="center">Nazwa: <input type="text" id="tekst"></p>
<p align="center"><button id="myBtn">D o d a j</button></p>
<hr>

Answer 2

Метод .getElementById принимает строку.

В коде идет попытка передать ему созданный элемент. Он приводится к строке и ищется элемент с id = [object HTMLTableCellElement]

Для решения достаточно убрать ненужный getElementById и устанавливать свойство .innerHTML напрямую созданному элементу.

document.getElementById("myBtn").onclick = dodajWiersz;

function dodajWiersz() {
  var wiersz = document.createElement("tr");

  var tdNumer = document.createElement("td");
  var val1 = document.getElementById("liczba").value;
  tdNumer.innerHTML = val1;

  var tdText = document.createElement("td");
  var val2 = document.getElementById("tekst").value;
  tdText.innerHTML = val2;

  wiersz.appendChild(tdNumer);
  wiersz.appendChild(tdText);
  var dodac = document.getElementById("tbd");
  dodac.appendChild(wiersz);

}

<table class="dowolna_nazwa">
  <thead>
    <tr>
      <th>Numer porządkowy</th>
      <th>Nazwa epizodu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Epizod numer 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Epizod numer 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Epizod numer 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Epizod numer 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Epizod numer 5</td>
    </tr>
  </tbody>
</table>
<br>
<table class="dowolna_nazwa">
  <tbody id="tbd">
  </tbody>
</table>
<p align="center">Numer: <input type="number" id="liczba"></p>
<p align="center">Nazwa: <input type="text" id="tekst"></p>
<p align="center"><button id="myBtn">D o d a j</button></p>
<hr>

БЛОГ НА HUSL

Динамическое добавление строк в таблицу HTML

Ответы (2 шт):