編集画面で表に行を追加する方法

Question

編集画面で表に行を追加する場合、他の方がどのようにやっているかが知りたいです。

具体的には、行追加ボタンを押すと最後尾に行が追加されて、更新ボタンで保存される画面です。

行追加の方法は思いつくところで以下があると思います。

①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行あることを前提としているので、行がない場合は使えません。

いわゆるスタンダードな方法や、他の方法や、自分はこうやっているなど教えてください。

よろしくお願いします。

Comments

[masaya_ohashi]

初期段階のテーブルにはデータが入っていることはありますか？このページにアクセスしたときは必ずテーブルの行は0件ですか？

[kazu56]

返事遅れてすみません。データがないこともあります。

Answer 1

雛形DOM

個人的には①を使います。
DocumentFragmentな雛形となるDOMを生成し、appendChild します。
1行目が存在するなら cloneNode でノードをコピーして内部コンテンツを書き換えることも検討します(③ですね)。
jQuery なら jQuery('<tr><td><input></td>td></td><td><input></td></tr>') がありますが、innterHTML 的な手法が好きでないので個人的には敬遠してます。

template 要素

HTML5 で拡張された template 要素を使うと楽に雛形DOMを扱うことが出来ます。
ただし、IE11 が未対応なので template.content, document.importNode が存在しなければ、template.firstElementChild.cloneNode(true) で代用する等の工夫が必要です。
(Can I use の情報と違い、なぜか私の手元の IE11 では template 要素を扱えたのが謎ですが…)

<table id="sample">
  <thead>
    <tr>
      <th>球団名</th>
      <th>選手名</th>
      <th>削除</th>
    </tr>
  </thead>
  <tbody>
    <template id="sample-tr"><tr>
      <td><input type="text" name="baseball-team-name" /></td>
      <td><input type="text" name="player-name" /></td>
      <td><input type="submit" name="delete" value="削除" /></td>
    </tr></template>
  </tbody>
</table>
<script>
'use strict';
function getTemplateNode (template) {
  if ('content' in template && typeof document.importNode === 'function') {
    return document.importNode(template.content, true);
  }

  var df = template.ownerDocument.createDocumentFragment();

  for (var i = 0, childNodes = template.childNodes, l = childNodes.length; i < l; ++i) {
    df.appendChild(childNodes[i]);
  }

  return df;
}

var tr = getTemplateNode(document.getElementById('sample-tr'));
document.getElementById('sample').tBodies[0].appendChild(tr);
</script>

• HTML で利用可能になった Template タグ: クライアントサイドのテンプレートの標準化 - HTML5 Rocks
• HTML templates - Can I use
• <template> - HTML | MDN

Re: kazu56 さん

Answer 2

最終行をクローンして使えば構造的にも楽では？
（もちろん同じ構造の行でなければ使えないですが）

<script>
$(function(){
  $('input[value=add]').click(function(){
    $('table tbody tr:last-child').clone().appendTo($('table tbody'))
    })});
$(document).on('click','input[value=del]',function(){
  if($(this).closest('tr').siblings().length >0){
    $(this).closest('tr').remove()
  }
});
</script>

<input type="button" value="add">
<table>
<tbody>
<tr><td><input></td><td>aaa</td><td><input type="button" value="del"></td></tr>
</tbody>
</table>

Answer 3

Pure jQueryならデメリット承知で①を使います。
②、③はコードを一見すると何をやっているかわからないですが、①は「テーブルの最終行に行を追加する」という行為がそのままコードに記述されているのでシンプルです。