Laravel/Ajax：在 ajax 函数中使用类/id 来调用表格内容而不是标签

Posted 2023-02-19

【中文标题】Laravel/Ajax：在 ajax 函数中使用类/id 来调用表格内容而不是标签

【英文标题】：Laravel/Ajax: use a class/id in an ajax function to call table content instead of tag

【发布时间】：2021-09-16 15:59:02

【问题描述】：

首先，这是我的用户界面：

由于在我的 ajax 中使用标签 <tbody> 而显示在我右侧的输出：

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

    $('tbody').html(tbody) 

我的问题是我在同一页面中使用了两个<tbody>，因此右侧的表格显示在左侧：

有没有办法让我的 ajax 函数读取一个类或一个 id 而不是标签本身？：

有点像我的tbody+= 变成：tbody(class/id)+=

这是我使用两个 tbody 标签的表格：

    <div class="col-md-2 border">
        <table id="categoryList" class="table">
            <thead>
                <tr>
                    <th class="thead-category-list">Category List</th>                
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

            <div class="col-md-10 border bbr-table-col">

                <div id="success_message"></div>
                <table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" >
                    <thead>
                        <tr class="bbr-table text-light">
                            <th>Group Name</th>                
                            <th>Group Type</th>
                            <th>Group Users</th>
                            <th>Status</th>
                            <th>Active</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
    </div>

任何帮助将不胜感激，谢谢

【参考方案1】：

如果您没有为两个表使用相同的 ID（顺便说一下，这是无效的 html），您可以使用表 ID 来选择正确的 ID。 从上面的 html 中你可以使用 table 类来识别它

$('table.table-striped tbody').html(tbody);

或者您可以修复无效的重复 ID 并使用该 ID 选择正确的表

<div class="col-md-2 border">
    <table id="side-categoryList" class="table">
        <thead>
            <tr>
                <th class="thead-category-list">Category List</th>                
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

        <div class="col-md-10 border bbr-table-col">

            <div id="success_message"></div>
            <table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" >
                <thead>
                    <tr class="bbr-table text-light">
                        <th>Group Name</th>                
                        <th>Group Type</th>
                        <th>Group Users</th>
                        <th>Status</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
</div>

$('#main-categoryList tbody').html(tbody);

【讨论】：

我明白了，所以它是 .html 中的 id，感谢您的帮助，请记住这一点