編集画面で表に行を追加する場合、他の方がどのようにやっているかが知りたいです。
具体的には、行追加ボタンを押すと最後尾に行が追加されて、更新ボタンで保存される画面です。
行追加の方法は思いつくところで以下があると思います。
①jQueryで追加行を作りテーブルの最後尾にappendする。
下記のようなイメージ。
$('table tbody tr').append( $('<tr><td><input></td>td></td><td><input></td></tr>') );
②追加行を事前に別の箇所に作りdisplay:none隠しておき、追加の際はそれを使う。
下記のようなイメージ。
<div style="display:none"> <tr><td><input></td>td></td><td><input></td></tr> </div>
$('table tbody tr').append( $('div').clone() );
③jQueryで表から行を取得して追加してそこの値を消す。
下記のようなイメージ。
$('tbody') //表から取得して追加 .append( $('tr').clone() ) //値を消す .find('tr:last input') .each(function(){ $(this).val('') })
自分の感想としては、①と②だと表が二重管理になるところがデメリットだと感じています。
また、①はjsでhtmlを管理するのが面倒だと感じています。
(jQueryのdomの書き方に関わらず)
③は行が最低でも1行あることを前提としているので、行がない場合は使えません。
いわゆるスタンダードな方法や、他の方法や、自分はこうやっているなど教えてください。
よろしくお願いします。