jQuery UI Selectable を使用してテーブル行をクリック可能にする
この記事では、jQuery UI の Selectable 機能を使用して、HTML テーブルの行をクリックして選択できるようにする方法を説明します。
---1. jQuery と jQuery UI ライブラリをインポートする
HTML ページに jQuery と jQuery UI ライブラリファイルがインポートされていることを確認します。CDN またはローカルファイルを使用してインポートできます。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<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>
2. HTML テーブルを作成する
標準の HTML テーブルを作成し、"myTable" などのユニークな ID を指定します。
<table id="myTable">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>都市</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>上海</td>
</tr>
</tbody>
</table>
3. jQuery UI Selectable を使用する
jQuery を使用してテーブル要素を選択し、`.selectable()` メソッドを呼び出して選択可能にします。
$(document).ready(function() {
$("#myTable tbody").selectable();
});
4. スタイルをカスタマイズする (オプション)
CSS を使用して、選択した行のスタイルをカスタマイズできます。たとえば、`.ui-selected` クラスを使用して背景色を追加できます。
#myTable tbody tr.ui-selected {
background-color: #f0f0f5;
}
5. 選択イベントを処理する (オプション)
`.on("selectableselected", ...)` メソッドを使用して選択イベントをリッスンし、コールバック関数で選択した行データを処理できます。
$(document).ready(function() {
$("#myTable tbody").selectable({
selected: function(event, ui) {
var selectedRows = $(ui.selected);
// 選択した行データを処理する
}
});
});
以上の手順で、jQuery UI Selectable を使用して、クリックして選択できるテーブルを簡単に作成できます。これにより、ユーザーエクスペリエンスが向上し、Web アプリケーションに、より豊富なインタラクティブ機能が提供されます。
---参考文献
---Q&A
Q1: 選択可能な複数の行を許可するにはどうすればよいですか？
A1: デフォルトでは、Selectable は複数の選択を許可します。ただし、`filter` オプションを使用して、選択可能な行を制限できます。たとえば、一度に 1 行だけを選択可能にするには、次のようにします。
$("#myTable tbody").selectable({
filter: "tr:not(.ui-selected)"
});
Q2: 選択した行のデータを取得するにはどうすればよいですか？
A2: `selected` イベントのコールバック関数内で、`ui.selected` を使用して選択した行の jQuery オブジェクトを取得できます。次に、`.text()` や `.data()` などの jQuery メソッドを使用して、行のデータにアクセスできます。
Q3: 選択を解除するにはどうすればよいですか？
A3: `_setSelection()` メソッドを使用して、選択をプログラムで解除できます。選択をすべて解除するには、次のようにします。
$("#myTable tbody").selectable("_setSelection", []);