Добавление строки в таблицу с помощью цикла

Я работаю над проектом, в котором я создаю таблицу элементов. Это выглядит так:Добавление строки в таблицу с помощью цикла

<table> 
    <tr> 
    <th>Priority</th> 
    <th>Item</th> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td><input type="text"><br></td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td><input type="text"></td> 
    </tr> 
<tr> 
    <td>3</td> 
    <td><input type="text"></td> 
    </tr> 
<tr> 
    <td>4</td> 
    <td><input type="text"></td> 
    </tr> 
<tr> 
    <td>5</td> 
    <td><input type="text"></td> 
    </tr> 
</table> 
<script type = "text/javascript"> 
</script> 

</head> 
<body> 
</body> 
</html>

Я хочу иметь кнопку, которая добавит еще одну строку со следующим числом и пробелом для ввода данных. Есть ли все-таки написать это в цикле с использованием Javascript?

источник

2015-01-31 retrogirl19

возможный дубликат [Как скопировать строку таблицы с клоном в JQuery и создавать новые уникальные идентификаторы для управления] (http://stackoverflow.com/ вопросы/3504499/how-to-copy-table-row-with-clone-in-jquery-and-create-new-unique-ids-for-the-con) –

Как насчет:

<table id="specialtable"> 
 
    <tr> 
 
    <th>Priority</th> 
 
    <th>Item</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td><input type="text"><br></td> 
 
    <td><button onclick="addRow(this);">Add</button><br></td>  
 
    </tr> 
 
</table> 
 

 

 
<script type = "text/javascript"> 
 
function addRow(e) { 
 
    var current = e.parentNode.parentNode; // <tr>...</tr> 
 
    var tnew = current.cloneNode(true); 
 
    var rowCount = current.parentNode.getElementsByTagName("tr").length; 
 
    tnew.getElementsByTagName("td")[0].textContent = rowCount; 
 
    current.parentNode.appendChild(tnew); 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

источник

2015-01-31 23:15:06

Большое вам спасибо! Это сработало отлично! – retrogirl19

Добро пожаловать. –

Добавление строки в таблицу с помощью цикла

ответ

Смежные вопросы