【jQuery】テーブルtableの最終行・先頭行・行数を指定して行を削除する方法

2022.11.06 / 2022.11.06

本記事ではjQueryを使用して、テーブルtableの最終行・先頭行・行数を指定して行を削除する方法について解説していきます。

Webアプリケーションでテーブルを動的に操作する場合、jQueryを使用することが多いです。

ここではテーブルの行を削除する方法としてjQueryのremove()メソッドとeq()メソッドを使用します。

本記事を通して、jQueryでテーブルの行（最終行・先頭行・指定行）を削除する方法について理解を深めてください。

jQuery：テーブルの行を削除する際に使用するメソッド

jQueryを使ってテーブルの最終行・先頭行・指定行を削除するために以下のメソッドを使用します。

eq()メソッド
remove()メソッド

テーブルの行数の指定にはeq()メソッドを使用し、行の削除にremove()メソッドを使用します。まずはそれぞれのメソッドについて見ていきましょう。

eq()メソッド

eq()メソッドはパラメーターに指定した位置の要素を取得するメソッドです。

構文

$(セレクタ).eq(インデックス番号);

インデックス番号には正の値だけでなく、負の値も指定することができます。負のインデックスを指定すると末尾から数えた要素を取得します。

eq()メソッドは以下のように使用します。

text = $('li').eq(2).text();

上記ではliの３番目のリストを取得します。

remove()メソッド

remove()メソッドは指定した要素を削除するメソッドです。

構文

$(セレクタ).remove();

指定した要素に子要素があれば、子要素も含めて削除します。以下にremove()メソッドの使用例を記します。

$("#button").on("click", function(){
  $("#sample").remove();
});

上記ではボタンがクリックされたらidがsampleの要素を削除しています。

jQuery：テーブルの行を削除する方法

ここではテーブルの先頭行・指定行・最終行を削除する方法について解説していきます。

ここでは以下のテーブルを使ってそれぞれの方法を説明していきます。

<table class="table table-bordered table-sm">
    <thead>
        <tr class="table-light" style="text-align:center;">
            <th scope="col">氏名</th>
            <th scope="col">年齢</th>
            <th scope="col">性別</th>
        </tr>
    </thead>
    <tbody class="target">
        <td>Office</td>
        <td>54</td>
        <td>男</td>
    </tbody>
    <tbody class="target">
        <td>Taro</td>
        <td>32</td>
        <td>男</td>
    </tbody>
    <tbody class="target">
        <td>Tanaka</td>
        <td>24</td>
        <td>女</td>
    </tbody>
</table>

各行tbodyにはクラスtargetを指定しており、このクラス名を使って行の指定を行います。

先頭行

テーブルの先頭行を削除する場合は次のようにjQueryを記述します。

<script>
$('.target ').eq(0).remove()
</script>

eq()メソッドで指定するインデックスは０から始まるため、先頭行を指定する場合は０を指定します。

指定行

テーブルの特定の指定した行を削除する場合はeq()メソッドのパラメーターにその行数を指定します。注意としては指定するインデックスは０から始まることです。

例えば3行目の行を削除する場合は次のように記述します。

<script>
$('.target ').eq(2).remove()
</script>

最終行

テーブルの最終行を削除する場合は次のようにjQueryを記述します。

<script>
$('.target ').eq(-1).remove()
</script>

最終行をeq()メソッドで指定する場合はインデックスに-1を指定します。

jQuery：テーブル操作の便利な機能

列幅をドラッグで変更させる

通常テーブルの列幅は固定されていますが、プラグインを利用するだけで簡単に列幅をユーザー自身で変更できるようになります。

表を使っているWebアプリケーションでぜひ利用してみてください。

まとめ

本記事「【jQuery】テーブルtableの最終行・先頭行・行数を指定して行を削除する方法」はいかがでしたか。

jQueryのeq()メソッドやremove()メソッドはよく利用するメソッドです。これらの使い方をマスターして今回のような応用した使い方ができるようになってください。