htmx - htmx：如何使每一行表现得像一个表格？

Question

我想要一个这样的表，并让每一行的行为都像<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和hx-params，但到目前为止还没有找到解决方案。

Answer 1

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

您应该能够使用 ID 在输入上生成一个类，然后使用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>