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

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>