Форум

Fronton · #1 (**permalink**) 17.02.2023, 16:03

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

<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>

рони · #2 (**permalink**) 17.02.2023, 16:25

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

Fronton · #3 (**permalink**) 17.02.2023, 16:32

Сообщение от рони

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

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

рони · #4 (**permalink**) 17.02.2023, 16:34

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>

Fronton · #5 (**permalink**) 17.02.2023, 16:39

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

voraa · #6 (**permalink**) 17.02.2023, 16:40

<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>

Fronton · #7 (**permalink**) 20.02.2023, 10:12

Спасибо

Fronton · #8 (**permalink**) 28.02.2023, 14:36

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

рони · #9 (**permalink**) 28.02.2023, 16:47

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

Форум

Справочник

Discord чат

Курсы javascript