Javascript-форум - Динамическая таблица

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Динамическая таблица (https://javascript.ru/forum/dom-window/84965-dinamicheskaya-tablica.html)

Динамическая таблица

Доброго времени суток, уважаемые форумчане!
Такая ситуация, срочно понадобилось создать веб-таблицу, чтобы можно было добавлять строки и их редактировать. На просторах инета наткнулся на код, немного его под свои нужды доработал, но не как не могу добиться того, чтобы при нажатии кнопки "добавить новую строку" добавлялись все ячейки ряда, а не одна. Подскажите где ошибка?

<html>
<head>
<script language="JavaScript">
 function add(){
var nodet = document.createElement('tr'); 
var node = document.createElement('td');
node.innerHTML = "<input type='text' name='1'>";
document.getElementById('tabl').appendChild(nodet);
nodet.appendChild(node);
}
</script>
</head>
<body>
<table id='tabl' border='1'align='left'>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<tr>
	<td><input type='text' name='1'></td>
	<td><input type='text' name='2'></td>
	<td><input type='text' name='1'></td>
	<td><input type='text' name='1'></td>
	<td><input type='text' name='1'></td>
	<td><input type='text' name='1'></td>
	<td><input type='text' name='1'></td>
	<td><input type='text' name='1'></td>
	<td><input type='text' name='1'></td>
</tr>
</table>
<body>
<input type='button' value='Добавить новую строку' onClick='add();'>
</body>
</html>
</script>

Fronton,
слегка отредактировать строку 9 и обернуть в цикл i < 9

Цитата:

Сообщение от рони (Сообщение 550727)

Fronton,
слегка отредактировать строку 9 и обернуть в цикл i < 9

А можете, если не сложно, написать как конкретно отредактировать и обернуть?

Fronton,

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        [name='1'] {
            width: 40px;
        }
    </style>
    <script>
        function add() {
            let nodet = document.createElement('tr');
            let node = document.createElement('td');
            node.innerHTML = "<input type='text' name='1'>";
            document.getElementById('tabl').append(nodet);
            for (let i = 0; i < 9; i++) nodet.appendChild(node.cloneNode(true));
        }
    </script>
</head>

<body>
    <table id='tabl' border='1' align='left'><tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th></tr>
        <tr>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
            <td><input type='text' name='1'></td>
        </tr>
    </table>
    <input type='button' value='Добавить новую строку' onClick='add();'>
</body>

</html>

Безмерно вам благодарен! Спасибо :)

<html>
<head>
<script language="JavaScript">
function add(){
	const temp = document.getElementById('temp');
	const frd = temp.content.cloneNode(true);
	document.getElementById('tabl').tBodies[0].append (frd);
}
</script>
</head>
<body>

<template id=temp>
<tr>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='2'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
</tr>
</template>

<table id='tabl' border='1'align='left'>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<tr>
<tr>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='2'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
    <td><input type='text' name='1'></td>
</tr>
</table>
<input type='button' value='Добавить новую строку' onClick='add();'>
</body>
</html>
</script>

Добрый день! Не могу понять, почему на wordpresse кнопка добавления не добавляет?!

Fronton,
можно только гадать, смотрите ошибки в консоли, F12