2020/10/08

JavaScriptでテーブルの行やセルを追加する方法【現役エンジニアが解説】

PROGRAM

今回は、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に代入し、その要素のテキストを操作しています。

• facebook
• Tweet
• Read Later