JavaScriptでテーブルの行やセルを追加する方法【現役エンジニアが解説】
今回は、JavaScriptでテーブルの行やセルを追加する方法について、テーブルの基本と行やセルを追加する方法に分け、簡単に解説していきます。
テーブルの基本
テーブルは全体として複数のタグ(要素)で構成されています。
tableタグ、theadタグ、tbodyタグ、trタグ、thタグ、tdタグで構成されています。
<table border="1" id="sampleTable"> <thead> <tr> <th>名前</th> <th>年齢</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>山田</td> <td>24</td> <td>男性</td> </tr> <tr> <td>田中</td> <td>26</td> <td>女性</td> </tr> </tbody> </table>
上記のコードのように、テーブルは階層構造となっており、行の追加は基本的にはtbody中の末尾に追加されます。
行を追加する方法
行を追加するには、HTMLTableElementのinsertRowメソッドを使います。
HTMLTableElementのinsertRowメソッドでは、行を追加し、その行の要素が返り値として返されます。
var row = document.getElementById("sampleTable").insertRow();
上記のコードでは、tbody中の末尾に新たに行を追加し、返り値として返って来た追加した行の要素をrowに代入しています。
セルを追加する方法
セルを追加するには、HTMLTableRowElementのinsertCellメソッドを使用します。
HTMLTableRowElementのinsertCellメソッドでは、行に対し、セルを追加し、そのセルの要素が返り値として返されます。
var cell = row.insertCell(); cell.textContent = "高橋"; cell = row.insertCell(); cell.textContent = "27"; cell = row.insertCell(); cell.textContent = "女性";
上記のコードでは、rowという行要素に対し、新たにセルを追加し、返り値として返って来たセルの要素をcellに代入し、その要素のテキストを操作しています。