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

Posted 2023-05-07

【中文标题】htmx：如何使每一行表现得像一个表格？

【英文标题】：htmx: How to make each row behave like a form?

【发布时间】：2021-04-19 23:08:04

【问题描述】：

我想要一个这样的表格，并让每一行的行为都像<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，但到现在都没有找到解决办法。

【问题讨论】：

我可以直接使用 css 来直接处理 htmx，而不是破解 htmx：***.com/questions/4035966/…（因为我不需要 colspan 或 rowspan）。

【参考方案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>