htmx - htmx:如何使每一行表现得像一个表格?
问题描述
我想要一个这样的表,并让每一行的行为都像<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,但到目前为止还没有找到解决方案。
解决方案
由于表格元素的工作方式,您不能在此处真正使用包装元素,因此您每行都有一个唯一 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>
推荐阅读
- sql - 在Oracle中将字符串时间戳转换为本地时区
- python - 如何在 Django 中实现浅删除
- ios - API 调用后 iPhone 重启
- r - 高阶或半马尔可夫过程
- github - pod network add-on flannel : kube-flannel.yml 的 'kubernetes 官方文档 url' 和 'github url' 之间的差异
- git - 这个警告/信息框是什么意思,我该如何摆脱它?
- linux - 詹金斯:未能执行目标 org.apache.maven.plugins:maven-clean-plugin:2.5:clean,但从命令提示符处执行
- swift - RxSwift 转换 Observable
成字符串 - android - 有没有办法一次用 shell 命令杀死所有最近的应用程序?
- javascript - 如何点击菜单中的链接?'执行上下文被破坏,很可能是因为导航'