Добавлять в таблицу новый ряд с текстами ячеек из инпутов

Question

Дана таблица из трех колонок, три инпута и кнопка. Сделайте так, чтобы по клику на кнопку в таблицу добавлялся новый ряд с текстами ячеек из инпутов.

  let tds = document.querySelectorAll("td");
  let inputs = [...document.querySelectorAll("input")];

  document.querySelector("button").addEventListener("click", function () {
    for (const td of tds) {
      for (const element of inputs) {
        let i = document.createTextNode(element.value);
        let tr = document.createElement("tr");
        tr.appendChild(i);
        td.appendChild(tr);
    }
    }
  });

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
  </head>
  <body>
<input />
<input />
<input />
<table border="1px" style="width: 300px; height: 300px; color: black">
  <td></td>
  <td></td>
  <td></td>
</table>
<button>press</button>
  </body>
</html>

Answer 1

Не знаю, это ли имелось в виду...но допустим...

let tds = document.querySelectorAll("td");
let inputs = [...document.querySelectorAll("input")];

document.querySelector("button").addEventListener("click", function() {
  inputs.forEach((el, i) => {
    tds[i].innerHTML += el.value + "<br>";
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <input />
  <input />
  <input />
  <table border="1px" style="width: 300px; height: 300px; color: black">
    <td></td>
    <td></td>
    <td></td>
  </table>
  <button>press</button>
</body>

</html>

Вместо br можно сделать всяко другое: на CSS задать свойства для td, а можно каждое значение оборачивать в div, а можно ещё тысячу вариаций придумать

БЛОГ НА HUSL

Добавлять в таблицу новый ряд с текстами ячеек из инпутов

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