Laravel/Ajax如何使用类/ID替代tbody标签渲染指定表格内容

问题原因 #

你的问题来自两个不合理的写法：

1. 页面两个表格使用了重复ID categoryList，违反HTML ID必须唯一的规范，本身就会导致选择器行为异常
2. 原代码$('tbody')是全局标签选择器，会匹配页面所有<tbody>元素，所以内容会同时写入两个表格的tbody区域

解决方案 #

步骤1：修正HTML的重复ID，添加专属标识 #

将两个表格的ID改为唯一值，也可以直接给目标tbody加专属ID方便定位：

<!-- 左侧分类列表表格（需要渲染分类的目标表格） -->
<div class="col-md-2 border">
    <table id="sidebarCategoryTable" class="table">
        <thead>
            <tr>
                <th class="thead-category-list">Category List</th>                
            </tr>
        </thead>
        <!-- 给目标tbody加专属ID，也可以不加，后续通过父表格定位即可 -->
        <tbody id="sidebarCategoryTbody"></tbody>
    </table>
</div>
<!-- 右侧业务表格 -->
<div class="col-md-10 border bbr-table-col">
    <div id="success_message"></div>
    <!-- 修改为唯一ID -->
    <table id="groupDataTable" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
        <!-- 原有表头、tbody内容保持不变 -->
    </table>
</div>

步骤2：修改Ajax回调的选择器 #

二选一即可，效果一致：

• 写法1：直接通过tbody专属ID定位（性能最优）
• 写法2：通过父表格ID查找子tbody（不需要给tbody加单独ID）

修改后的完整回调代码：

success: function (response){
    var tbody="";
    $.each(response.all_categories, function (key, cat) {
    tbody+=`
    <tr>
        <td class="p-0 btn-category-list-col">
          <button type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
        </td>
    </tr>`; });

    // 替换原来的$('tbody').html(tbody)即可
    // 写法1：
    $('#sidebarCategoryTbody').html(tbody)
    // 写法2（不用给tbody加ID的情况）：
    // $('#sidebarCategoryTable tbody').html(tbody)
}

额外优化提示：你循环生成的button统一用了id="submit"，也存在重复ID问题，建议删除该ID或者改成动态生成的唯一值，避免后续交互异常。

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