一括更新

このデモでは、行を選択して一括で更新する一般的なパターンを実装する方法を示します。これは、テーブルの周りにフォームを作成し、テーブルにチェックボックスを追加し、チェックされた値をフォームの送信（POST リクエスト）に含めて実現します。

<form id="checked-contacts"
      hx-post="/users"
      hx-swap="outerHTML settle:3s"
      hx-target="#toast">
    <table>
      <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Active</th>
      </tr>
      </thead>
      <tbody id="tbody">
        <tr>
          <td>Joe Smith</td>
          <td>joe@smith.org</td>
          <td><input type="checkbox" name="active:joe@smith.org"></td>
        </tr>
        ...
      </tbody>
    </table>
    <input type="submit" value="Bulk Update" class="btn primary">
    <span id="toast"></span>
</form>

サーバーは、チェックボックスの値に基づいてステータスを一括で更新します。更新に関する小さなトースト メッセージで応答して、ユーザーに伝え、ARIA を使用して更新を正しくアナウンスし、アクセスしやすくします。

#toast.htmx-settling {
  opacity: 100;
}

#toast {
  background: #E1F0DA;
  opacity: 0;
  transition: opacity 3s ease-out;
}

HTML フォーム入力はすでに独自のステータスを管理しているので、ユーザーのテーブルの領域を再描画する必要がないということが素晴らしいことです。アクティブなユーザーはすでにチェックされ、非アクティブなユーザーはチェックが解除されています。

このコードの動作例を以下に示します。

🔗デモ