jQueryでinputタグの追加と削除

jQueryでinputを追加・削除するには、appendとremoveメソッドを使うことでできます。

そこで、下の画像にあるような2列になっているinputによる入力欄を行ごとに追加・削除する方法として、何が良いのか考えたのですがHTMLのTableタグを使うと簡単に操作できるので良いのでないかと思います。

例としてしたのようなformがあるとします。

<form>
<table id="Table">
<tr>
<td><input type="text" name="data_prop" /></td>
<td><input type="text" name="data_value" /></td>
</tr>
<tr>
<td><input type="text" name="data_prop" /></td>
<td><input type="text" name="data_value" /></td>
</tr>
<tr>
<td><input type="text" name="data_prop" /></td>
<td><input type="text" name="data_value" /></td>
</tr>
</table>
</form>

<input type="button" id="rowAdd" value="追加" />
<input type="button" id="rowRemove" value="削除" />

このフォームにinputを追加するとき、tableのtrごと追加・削除することで複雑な操作がなく楽だと思います。

$('#rowAdd').on('click', function() {
	$('#Table').append('<tr><td><input type="text" id="data_prop1" name="data_prop" /></td><td><input type="text" id="data_value1" name="data_value" /></td></tr>');
});
$('#rowRemove').on('click', function() {
	$('#Table tr:last-child').remove();
});