[JavaScript]動的に行を追加する

テーブルを使ってドロップダウンボックスから項目を選択するような表を作成しています。

項目数の最大値が確定していればいいのですが、最大値が分からない場合はテーブルの行数を動的に増減できるといいですよね。JavaScriptを用いてテーブルの行を動的に追加・削除する方法を紹介します。

できあがりは以下のイメージです。＋を押すと、一番下に行が追加され、－を押すとその行が削除されます。数値に関しては＋を押した行の番号＋1の行が追加されるだけで、表全体として番号がユニークに連番で振られるわけではありません。(手抜きですみません。。。)

ソースコードです。まずは、HTML側です。JavaScriptのonClickで行の追加関数(addList())と、削除関数(deleteList())を実行するようにしています。

<table>
  <tbody id="listOperation">
    <tr>
      <td>1</td>
      <td>
        <input type="button" value="－" onClick="deleteList(this)">
        <input type="button" value="＋" onClick="addList(this)">
      </td>
    </tr>
  </tbody>
</table>

次にJavaScript側です。

addList()は＋ボタンを押した親ノード、つまりtdタグの親となるtrエレメントを取得し、その中からCellの1番目の中身(innerHTML)を取得しています。今回は数字を書いているので、それをインクリメントしています。次にtbodyの中身に新しく追加する行の中身を追記しているだけです。

deleteList()はtbodyと、－ボタンのtrの各エレメントを取得しておいて、removeChildでtrエレメントを削除しています。

/**
 * ----------------------------------------------------------
 * addList()
 * ＋を押した行の番号をインクリメントした行を追加する
 * ----------------------------------------------------------
 */
function addList(obj) {
  var tr=obj.parentNode.parentNode;
  var num=tr.cells[0].innerHTML;
  num++;

  document.all.listOperation.innerHTML = document.all.listOperation.innerHTML
                                       + '<tr><td>'+ num +'</td>'
                                       + '<td><input type="button" value="－" onClick="deleteList(this)">'
                                       + '<input type="button" value="＋" onClick="addList(this)"></td></tr>';

}

/**
 * ----------------------------------------------------------
 * deleteList()
 * －ボタンを押した行を削除する
 * ----------------------------------------------------------
 */
function deleteList(obj) {
  var tbody=document.getElementById("listOperation");
  var tr=obj.parentNode.parentNode;
  tbody.removeChild(tr);
}

ものすごく簡単にまとめたものなので、－ボタンを押し続けるとすべての行が消えてしまい、＋ボタンを押すことができなくなってしまうなどの問題が発生しますが、そのあたりのロジックに関しては今回は省いています。

行の順番の入れ替えなどできると便利ですよね。そちらに関しては、またの機会にご紹介します。