This demo shows how to implement a common pattern where rows are selected and then bulk updated. This is
accomplished by putting a form around a table, with checkboxes in the table, and then including the checked
values in PUT's to two different endpoints: activate and deactivate:
<div hx-include="#checked-contacts" hx-target="#tbody">
<a class="btn" hx-put="/activate">Activate</a>
<a class="btn" hx-put="/deactivate">Deactivate</a>
</div>
<form id="checked-contacts">
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="">
<td><input type='checkbox' name='ids' value='0'></td>
<td>Joe Smith</td>
<td>joe@smith.org</td>
<td>Active</td>
</tr>
...
</tbody>
</table>
</form>
The server will either activate or deactivate the checked users and then rerender the tbody tag with
updated rows. It will apply the class activate or deactivate to rows that have been mutated. This allows
us to use a bit of CSS to flash a color helping the user see what happened:
.htmx-settling tr.deactivate td {
background: lightcoral;
}
.htmx-settling tr.activate td {
background: darkseagreen;
}
tr td {
transition: all 1.2s;
}
You can see a working examle of this code below.
<h3>Select Rows And Activate Or Deactivate Below<h3>
<form id="checked-contacts">
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="">
<td><input type='checkbox' name='ids' value='0'></td><td>Joe Smith<...