目次
JavaScriptでtableを操作するサンプル
HTMLテーブルを操作することは、Web開発において重要なスキルの一つです。この記事では、JavaScriptを使ったHTMLテーブルの列の表示非表示や行の入れ替えの方法を解説します。
ドラッグドロップで列を入れ替える
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tableの列の入れ替え</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 0.5rem;
text-align: center;
cursor: move;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田太郎</td>
<td>20</td>
<td>男性</td>
</tr>
<tr>
<td>鈴木花子</td>
<td>25</td>
<td>女性</td>
</tr>
<tr>
<td>田中一郎</td>
<td>30</td>
<td>男性</td>
</tr>
</tbody>
</table>
<script>
let draggingColumn;
// ドラッグ開始時に実行する関数
function handleDragStart(e) {
// ドラッグされた列の位置を保存する
draggingColumn = e.target.cellIndex;
}
// ドラッグオーバー時に実行する関数
function handleDragOver(e) {
// ドロップ先の列の位置を取得する
const dropIndex = e.target.cellIndex;
// ドラッグされた列とドロップ先の列が異なる場合
if (draggingColumn !== dropIndex) {
const rows = document.querySelectorAll('#myTable tbody tr');
rows.forEach(row => {
// ドラッグされた列とドロップ先の列のセルを取得する
const draggingCell = row.cells[draggingColumn];
const dropCell = row.cells[dropIndex];
// ドラッグされた列をドロップ先の列の前に挿入する
if (draggingColumn < dropIndex) {
row.insertBefore(dropCell, draggingCell);
} else {
row.insertBefore(draggingCell, dropCell);
}
});
}
}
// 各列にイベントリスナーを登録する
const columns = document.querySelectorAll('#myTable th');
columns.forEach(column => {
column.setAttribute('draggable', true);
column.addEventListener('dragstart', handleDragStart);
column.addEventListener('dragover', handleDragOver);
});
</script>
</body>
</html>このコードでは、各列にdragstart、dragoverの2つのイベントリスナーを登録しています。dragstartイベントが発生した際には、ドラッグされた列の位置を変数draggingColumnに保存しています。そして、dragoverイベントが発生した際には、ドロップ先の列の位置を変数dropIndexに取得し、ドラッグされた列とドロップ先の列が異なる場合には、querySelectorAllメソッドを用いてテーブルのtbody要素内にあるすべての行を取得し、forEachメソッドを用いて各行に対して以下の処理を実行しています。
1.ドラッグされた列とドロップ先の列のセルを取得する。
2.ドラッグされた列をドロップ先の列の前に挿入する。
こうすることで、列の入れ替えを実現することができます。
ボタン操作で行を入れ替える
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Move Table Row Sample</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 0.5em;
}
.dragged {
opacity: 0.5;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>25</td>
<td>Male</td>
<td><button onclick="moveUp(this)">Up</button><button onclick="moveDown(this)">Down</button></td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>30</td>
<td>Female</td>
<td><button onclick="moveUp(this)">Up</button><button onclick="moveDown(this)">Down</button></td>
</tr>
<tr>
<td>3</td>
<td>Bob Johnson</td>
<td>40</td>
<td>Male</td>
<td><button onclick="moveUp(this)">Up</button><button onclick="moveDown(this)">Down</button></td>
</tr>
<tr>
<td>4</td>
<td>Alice Williams</td>
<td>35</td>
<td>Female</td>
<td><button onclick="moveUp(this)">Up</button><button onclick="moveDown(this)">Down</button></td>
</tr>
</tbody>
</table>
<script>
function moveUp(button) {
const row = button.parentNode.parentNode;
if (row.previousElementSibling) {
row.parentNode.insertBefore(row, row.previousElementSibling);
}
}
function moveDown(button) {
const row = button.parentNode.parentNode;
if (row.nextElementSibling) {
row.parentNode.insertBefore(row.nextElementSibling, row);
}
}
</script>
</body>
</html>このサンプルでは、