jqueryによる行追加方法

これもしょっちょうやるのにメモするのを面倒臭がって結局毎回調べることになるので今度こそメモ。

例えば以下の様な感じで、行追加ボタンを押す度に最後の行をベースにtrを追加したい場合。

html

<table id="itemTbl">
<tr>
 <th>名称</th>
 <th>金額</th>
</tr>
<?php foreach($list as $v):?>
<tr>
 <td><input type="text" name="item_name[]" value="<?php e(h($v['name']));?>" /></td> 
 <td><input type="text" name="item_price[]" value="<?php e(h($v['price']));?>" /></td>
</tr>
<?php endforeach;?>
<tr>
 <td><input type="text" name="item_name[]" class="item_num" /></td> 
 <td><input type="text" name="item_price[]" class="item_price" /></td>
</tr>
</table>
<input type="button" onclick="addTr(this)" value="行追加" />

javascript

function addTr(btn) {
  var lastTr = $('#itemTbl tr:last').clone(true);
  //inputの中身クリアする場合
  lastTr.find('input[type=text]').val('');
  $('#itemTbl').append(lastTr);
}