HOWTO · jQuery
jQuery の並べ替え可能なテーブル
このチュートリアルでは、jQuery で並べ替え可能なテーブルを作成する方法を示します。
このページの内容
このチュートリアルでは、jQuery で並べ替え可能なテーブルを作成する方法を示します。
jQuery で並べ替え可能なテーブルを作成する
jQuery UI パッケージには sortable() メソッドがあり、DOM オブジェクトのドラッグによる並べ替え機能を実装しています。 このメソッドの構文は次のとおりです。
$(selector).sortable();
sortable メソッドは、リスト、テーブルなどで実装できます。sortable() メソッドのデフォルト機能を使った簡単な例を試してみましょう。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#DemoList {
list-style-type: none;
width: 20%;
}
#DemoList li {
border: 5px solid green;
background-color : lightgreen;
height: 18px;
padding: 0.5em;
padding-left: 2em;
font-size: 2em;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#DemoList" ).sortable();
});
</script>
</head>
<body>
<ul id="DemoList">
<li class="ui-state-default">Delftstack 1</li>
<li class="ui-state-default">Delftstack 2</li>
<li class="ui-state-default">Delftstack 3</li>
<li class="ui-state-default">Delftstack 4</li>
<li class="ui-state-default">Delftstack 5</li>
</ul>
</body>
</html>
上記のコードは、リストのデフォルトの sortable 関数を実装しています。 出力を参照してください。
それでは、jQuery UI メソッド sortable() メソッドを使用して、並べ替え可能なテーブルを作成してみましょう。 ソート可能なテーブルを作成するには、jQuery UI ドキュメントで提供されているオプション、メソッド、およびイベントを使用して sortable() メソッドをカスタマイズすることもできます。 例を試してみましょう。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable Table</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style type="text/css">
table th, table td
{
width: 150px;
padding: 10px;
border: 3px solid #ccc;
}
.Selected_Row
{
background-color: lightgreen;
color: darkgreen;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#DemoTable").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'move',
axis: 'y',
dropOnEmpty: true,
scroll: true,
tolerance: "pointer",
start: function (e, ui) {
ui.item.addClass("Selected_Row");
},
stop: function (e, ui) {
ui.item.removeClass("Selected_Row");
$(this).find("tr").each(function (index) {
if (index > 0) {
$(this).find("td").eq(3).html(index);
}
});
}
});
});
</script>
</head>
<body>
<table id="DemoTable">
<tr>
<th>ID </th>
<th>First Name</th>
<th>Last Name</th>
<th>Preference</th>
</tr>
<tr>
<td>1</td>
<td>James</td>
<td>Smith</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>Robert</td>
<td>Smith</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Maria</td>
<td>Rodriguez</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>James</td>
<td>Johnson</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>John</td>
<td>Trovolta</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>Jack</td>
<td>Danials</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>Dana</td>
<td>White</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>Josh</td>
<td>Thompson</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>Connor</td>
<td>Rollins</td>
<td>9</td>
</tr>
</table>
</body>
</html>
上記のコードは sortable() メソッドをカスタマイズし、cursor、axis、dropOnEmpty、scroll、tolerance オプションと start、および stop メソッドを使用します。 このコードは、ドラッグ可能な機能を備えた並べ替え可能なテーブルを作成します。
出力を参照してください。
