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="行追加" />
function addTr(btn) { var lastTr = $('#itemTbl tr:last').clone(true); //inputの中身クリアする場合 lastTr.find('input[type=text]').val(''); $('#itemTbl').append(lastTr); }