jquery ui selectable table

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 アプリケーションに、より豊富なインタラクティブ機能が提供されます。

---

参考文献

jQuery UI Selectable API ドキュメント

---

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", []);