LoginSignup
45

More than 3 years have passed since last update.

jQueryでテーブルの行を操作する(移動・削除・追加)

Last updated at Posted at 2017-06-04

jQueryを使ってテーブルの行を上下に移動したり、追加や削除を行う方法の覚書きです。サンプルのHTML部分は末尾に掲載します。

選択した行をひとつ上へ移動

clickイベントが発生した要素からclosest()で遡ってtrオブジェクトを取得し、そのtrオブジェクト自身を、ひとつ上の要素に対してinsertBefore()で追加します。

JavaScript
$('.rowup').click(function() {
 let $row = $(this).closest("tr");
 let $row_prev = $row.prev("tr");
 if($row.prev.length) {
     $row.insertBefore($row_prev);
 }
});

選択した行をひとつ下へ移動

clickイベントが発生した要素からclosest()で遡ってtrオブジェクトを取得し、そのtrオブジェクト自身を、ひとつ下の要素に対してinsertAfter()で追加します。

JavaScript
$('.rowdown').click(function() {
 let $row = $(this).closest("tr");
 let $row_next = $row.next("tr");
 if($row_next.length) {
     $row.insertAfter($row_next);
 }
});

選択した行を削除

clickイベントが発生した要素からclosest()で遡ってtrオブジェクトを取得し、そのtrオブジェクトをremove()で削除します。

JavaScript
$('.rowdel').click(function() {
 let row = $(this).closest("tr").remove();
 $(row).remove();
});

選択した行をコピーしてひとつ下に追加

clickイベントが発生した要素からclosest()で遡ってtrオブジェクトを取得し、そのtrオブジェクトをclone()で複製した上で、自身のひとつ下にinsertAfter()で追加します。もちろんclone()せずに新しいtrオブジェクトを作って追加してもいいです。その場合はイベントがセットされていないので、大元のイベントをtableにセットしてdelegateするか、別途個別にイベントセットする必要があります。

JavaScript
$('.rowins').click(function() {
 let $row = $(this).closest("tr");
 let $newRow = $row.clone(true);
 $newRow.insertAfter($row);
});

ターゲットのテーブルの例

ボタンにclass属性を付けてclickイベントを割り当てています。

ブラウザでの表示例

HTML
<table border="1px">
    <thead>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>性別</th>
            <th>上へ</th>
            <th>下へ</th>
            <th>削除</th>
            <th>追加</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>山田太郎</td>
            <td></td>
            <td><button class="rowup"></button></td>
            <td><button class="rowdown"></button></td>
            <td><button class="rowdel">Del</button></td>
            <td><button class="rowins"></button></td>
        </tr>
        <tr>
            <td>002</td>
            <td>鈴木二郎</td>
            <td></td>
            <td><button class="rowup"></button></td>
            <td><button class="rowdown"></button></td>
            <td><button class="rowdel">Del</button></td>
            <td><button class="rowins"></button></td>
        </tr>
        <tr>
            <td>003</td>
            <td>高橋陽子</td>
            <td></td>
            <td><button class="rowup"></button></td>
            <td><button class="rowdown"></button></td>
            <td><button class="rowdel">Del</button></td>
            <td><button class="rowins"></button></td>
        </tr>
        <tr>
            <td>004</td>
            <td>山本三郎</td>
            <td></td>
            <td><button class="rowup"></button></td>
            <td><button class="rowdown"></button></td>
            <td><button class="rowdel">Del</button></td>
            <td><button class="rowins"></button></td>
        </tr>
    </tbody>
</table>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45