Добавление новой строки с помощью jQuery (ручное манипулирование DOM, как это вручную, мучительно утомительно):
<table id="data">
<tr>
<td>
<label>
Foo
<input name="foo[]" />
</label>
</td>
<td>
<label>
Bar
<input name="bar[]" />
</label>
</td>
<td>
<label>
Baz
<input name="baz[]" />
</label>
</td>
<td>
<label>
Qux
<input name="qux[]" />
</label>
<button id="add">+</button>
</td>
</tr>
</table>
$(function() { // will run after the DOM tree loaded
$('#add').click(function() {
$('#add').detach();
$('#data tr:last').clone().val(null).insertAfter($('#data tr:last'));
$('#add').append('#data td:last');
});
});
Использование имен ввода, таких как foo[], прекрасно работает с PHP, который будет возвращать все входы в этом столбце в массиве с именем foo. Если вы не хотите этого, вы должны изменить имена полей в новой строке вручную. Кроме того, если вы хотите доступный сайт, у вас должен быть запасной вариант без javascript для добавления новых строк ... все становится сложнее.