编辑行

本示例展示如何实现可编辑行。首先我们来看表格主体：

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>姓名</th>
      <th>邮箱</th>
      <th></th>
    </tr>
  </thead>
  <tbody hx-target="closest tr" hx-swap="outerHTML">
    ...
  </tbody>
</table>

这将告诉表格内的请求以触发请求的最接近的封闭行作为目标，并替换整行。

以下是行的HTML代码：

<tr>
      <td>${contact.name}</td>
      <td>${contact.email}</td>
      <td>
        <button class="btn danger"
                hx-get="/contact/${contact.id}/edit"
                hx-trigger="edit"
                onClick="let editing = document.querySelector('.editing')
                         if(editing) {
                           Swal.fire({title: '正在编辑中',
                                      showCancelButton: true,
                                      confirmButtonText: '是的，编辑此行！',
                                      text:'嘿！您已经在编辑一行了！您想取消那个编辑并继续吗？'})
                           .then((result) => {
                                if(result.isConfirmed) {
                                   htmx.trigger(editing, 'cancel')
                                   htmx.trigger(this, 'edit')
                                }
                            })
                         } else {
                            htmx.trigger(this, 'edit')
                         }">
          编辑
        </button>
      </td>
    </tr>

这里我们使用了一些JavaScript技巧，一次只允许编辑一行。我们检查是否有一行带有.editing类，并确认用户想要编辑当前行并取消另一行的编辑。如果是，我们向另一行发送一个取消事件，使其发出请求返回初始状态。

然后我们触发当前元素上的edit事件，这将触发htmx请求获取行的可编辑版本。

请注意，如果您不关心用户是否同时编辑多行，可以省略hyperscript和自定义的hx-trigger，只需让正常的点击处理与htmx一起工作。您也可以通过简单地以整个表格为目标来实现互斥编辑。这里我们想展示如何集成htmx和JavaScript来解决问题，并缩小服务器交互范围，此外我们还可以使用漂亮的SweetAlert确认对话框。

最后，这是数据被编辑时行的样子：

<tr hx-trigger='cancel' class='editing' hx-get="/contact/${contact.id}">
  <td><input autofocus name='name' value='${contact.name}'></td>
  <td><input name='email' value='${contact.email}'></td>
  <td>
    <button class="btn danger" hx-get="/contact/${contact.id}">
      取消
    </button>
    <button class="btn danger" hx-put="/contact/${contact.id}" hx-include="closest tr">
      保存
    </button>
  </td>
</tr>

这里有几个功能：首先，行本身可以响应cancel事件，这将返回行的只读版本。有一个取消按钮可以取消当前编辑。最后，有一个保存按钮发出PUT请求更新联系人。请注意，有一个hx-include包含了最近行中的所有输入。由于HTML限制（您不能直接在tr中放置form），表格行很难与表单一起使用，这使得处理起来更方便。

🔗演示