jQuery でテーブル行を追加する方法

  1. jQuery でテーブル行を追加するには、append() / prepend() を使用する
  2. JavaScript でテーブル行を追加する

現在の HTML では、テーブル要素には tbodytheadtfoot などの様々な内部要素があり、データの行を格納しています。

<table id="test">
   <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

jQuery には、要素を追加するために DOM の内側と外側の 2つの挿入方法が用意されています。

jQuery でテーブル行を追加するには、append() / prepend() を使用する

jQuery を用いてテーブルの本文に行を追加するには、append()prepend() の DOM 内部挿入メソッドを用いて、提案された要素の開始や終了に要素を追加することができます。ここでは、table 要素の tbody 要素を id="test" で選択して行を追加する。

<script>
  $("#test>tbody").append("<tr><td>Test Row Append</td></tr>");
   //adding row to end and start
  $("#test>tbody").prepend("<tr><td>Test Row Prepend</td></tr>");</script>

以下のスクリプトを実行すると、新しい HTML は以下のようになります。

<table id="test">
   <tbody>
        <tr><td>Test Row Prepend</td></tr>
        <tr><td>Foo</td></tr>
        <tr><td>Test Row Append</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

このように jQuery で行を追加する方法は、appendto()prependto() メソッドを利用することで実現できる。

<script>
 $("<tr><td>Test Row Append</td></tr>").appendto("#test>tbody");
 $("<tr><td>Test Row Prepend</td></tr>").prependto("#test>tbody");
</script>

外部 DOM 挿入を使って jQuery にテーブル行を挿入する

jQuery には、指定した要素の前後に要素を挿入するための .after() メソッドと .before() メソッドが用意されています。これらのメソッドを利用して、様々なテーブルの位置にテーブル行を追加することで、正確なテーブル行の追加を行うことができます。

<table>
 <tbody>
  <tr><td> Item First </td></tr>
  <tr><td> Item Last </td></tr>
 </tbody>
</table>

<script>
 $("table tbody:nth-child(1)").after("<tr><td> Item Second </td></tr>");
	//adding second item after 1st item
 $("table tbody:last-child").before("<tr><td> Item Just Before Last</td></tr>");
	//adding an item before last item
<script>

JavaScript でテーブル行を追加する

あるいは、insertRow() 関数を使ってテーブルに行を追加する JavaScript のネイティブな方法もあります。

<table id="test">
  <tr>
    <td>row1 column1</td>
    <td>row1 column2</td>
  </tr>
</table>

<script>
function addrow(){
 var table = document.getElementById("test");
 var row = table.insertRow(0);
  //this adds row in 0 index i.e. first place
 row.innerHTML = "<td>row0 column1</td><td>row0 column2</td>";
}
</script>
comments powered by Disqus