htmx：如何使每一行的行为都像一个表单？

Question

我想要一个这样的 table，并使每一行的行为都像 <form>。

如果用户点击“保存”，只有当前行应该提交给服务器。

<table>
 <tr>
  <th>Name</th>
  <th>Email</th>
  <th></th>
 </tr>
 <tr>
  <td><input type="text" name="name"></td>
  <td><input type="text" name="email"></td>
  <td><input type="submit" value="Save"></td>
 </tr> 
  <tr>
  <td><input type="text" name="name"></td>
  <td><input type="text" name="email"></td>
  <td><input type="submit" value="Save"></td>
 </tr> 
  <tr>
  <td><input type="text" name="name"></td>
  <td><input type="text" name="email"></td>
  <td><input type="submit" value="Save"></td>
 </tr> 
</table>

我试过 <tr hx-post="..."> ... 但这会提交所有输入元素，而不仅仅是当前行。

我试过 hx-include and hx-params，但到现在为止还没有找到解决方案。

Answer 1

由于表元素的工作方式，您不能在这里真正使用包装元素，因此每行都有一个唯一的 ID，并使用它来标识该行的输入。

您应该能够使用 ID 在输入上生成 class，然后使用 hx-include 属性包含它们：

 <tr>
  <td><input class='row1-inputs' type="text" name="name"></td>
  <td><input class='row1-inputs' type="text" name="email"></td>
  <td><input hx-include='.row1-inputs' type="submit" value="Save"></td>
 </tr>

htmx：如何使每一行的行为都像一个表单？

htmx: How to make each row behave like a form?

htmx