使用HTMX向表格插入行异常：新<tr>未正确插入tbody

核心问题 #

你的代码存在表格行标签嵌套的错误，导致HTMX无法正确解析OOB（Out of Band）交换指令。

在form-and-oob模板中，你在外层写了<tr>标签，同时又调用了本身就包含完整<tr>的contact模板：

{{ define "form-and-oob" }}
{{ template "form" .Form }}
<tr hx-swap-oob="afterbegin:#contacts-body">
    {{ template "contact" .Data.Contact }} <!-- 该模板会输出另一个<tr> -->
</tr>
{{ end }}

这会让后端返回的HTML出现<tr><tr>...</tr></tr>的无效嵌套结构，浏览器解析时会自动修正DOM，剥离内层的<tr>，同时HTMX无法识别外层<tr>上的hx-swap-oob属性，最终导致这部分内容被当成主响应的一部分，渲染在表单下方，且丢失了正确的<tr>标签结构。

修复方案 #

你有两种可行的修复方式：

方式一：修改form-and-oob模板，移除嵌套的<tr> #

直接让contact模板输出带有OOB属性的完整行：

{{ define "form-and-oob" }}
{{ template "form" .Form }}
<!-- 调用新增的带OOB属性的行模板 -->
{{ template "contact-oob" .Data.Contact }}
{{ end }}

{{ define "contact-oob" }}
<tr id="contact-{{ .ID }}" hx-swap-oob="afterbegin:#contacts-body">
    <td id="uuid-column">{{ .ID }}</td>
    <td><strong>{{ .Name }}</strong> </td>
    <td>{{ .Age }} </td>
    <td>{{ .Email }}</td>
    <td id="button-cell">
        <button id="edit-button">
            <i class="fa-solid fa-edit" id="edit-icon"></i>
        </button>
        <button id="delete-button">
            <i class="fa-solid fa-trash" id="delete-icon" hx-delete="/delete/{{ .ID }}" hx-swap="outerHTML"
                hx-target="#contact-{{ .ID }}"></i>
        </button>
    </td>
</tr>
{{ end }}

方式二：修改contact模板仅返回单元格内容 #

让contact模板只输出<td>部分，再在form-and-oob中包裹<tr>并添加OOB属性：

{{ define "contact" }}
<td id="uuid-column">{{ .ID }}</td>
<td><strong>{{ .Name }}</strong> </td>
<td>{{ .Age }} </td>
<td>{{ .Email }}</td>
<td id="button-cell">
    <button id="edit-button">
        <i class="fa-solid fa-edit" id="edit-icon"></i>
    </button>
    <button id="delete-button">
        <i class="fa-solid fa-trash" id="delete-icon" hx-delete="/delete/{{ .ID }}" hx-swap="outerHTML"
            hx-target="#contact-{{ .ID }}"></i>
    </button>
</td>
{{ end }}

{{ define "form-and-oob" }}
{{ template "form" .Form }}
<tr hx-swap-oob="afterbegin:#contacts-body">
    {{ template "contact" .Data.Contact }}
</tr>
{{ end }}

验证要点 #

• 确保#contacts-body这个tbody的ID在页面中唯一且正确
• 检查后端返回的HTML中，OOB内容没有出现标签嵌套问题
• 确认HTMX能正确识别hx-swap-oob="afterbegin:#contacts-body"指令

内容的提问来源于stack exchange，提问作者MeMeto3