使用jQueryAjax和PHP将数据加载到动态创建的选项卡中

我的情况如下：

PHP脚本从数据库检索数据。此信息显示在第一个选项卡中。此选项卡将始终保持不变，无法关闭。这很好，请看我的代码

try {

print '
    <div class="clientTabs">
        <ul class="nav nav-tabs" id="navTabs">
            <li class="active" id="li0"><a href="#client0" role="tab" data-toggle="tab">Alle clienten</a></li>
        </ul>
    </div>';

$selectTabbladen = $gebruiker_data->runQuery("SELECT * FROM clients  ORDER BY clients_id");

if (!$selectTabbladen->execute()) return false;

if ($selectTabbladen->rowCount() > 0) {

print '
<div class="tab-content" id="tabContent">
    <div id="client0" class="tab-pane active">
        <div class="bootstrap-table">
            <div class="fixed-table-toolbar">
                <div class="bars pull-left">
                    <button id="btnTabdel" class="btn btn-danger btn-labeled" disabled="disabled">Vervijderen</button>
                </div>
            </div>
        </div>

        <table class="table table-bordered" id="table"
            data-toolbar="#toolbar"
            data-search="true"
            data-show-refresh="true"
            data-show-toggle="false"
            data-show-columns="true"
            data-show-export="true"
            data-detail-view="true"
            data-detail-formatter="detailFormatter"
            data-pagination="true"
            data-id-field="id"
            data-minimum-count-columns="2"
            data-page-list="[10, 25, 50, 100, ALL]"
            data-show-footer="false">

            <thead>
                <tr>
                    <th class="text-center" width="1">#</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Zip</th>
                    <th>City</th>
                    <th>Tel.</th>
                </tr>
            </thead>
            <tbody>';                       

            while($aRow = $selectTabbladen->fetch(PDO::FETCH_ASSOC)) {

                $id = $aRow['clients_id'];
                $name= $aRow['name'];
                $adress= $aRow['address'];
                $zip= $aRow['zip'];
                $city= $aRow['city'];
                $tel= $aRow['tel'];

                print '<tr class="tabData" id="'.$id.'">
                    <td>
                        <label class="cr-styled">
                            <input type="checkbox" ng-model="todo" class="tabID" value="'.$id.'"/>
                            <i class="fa"></i>
                        </label>
                    </td>
                    <td>'.$name.'</td>
                    <td>'.$address.'</td>
                    <td>'.$zip.'</td>
                    <td>'.$city.'</td>
                    <td>'.$tel.'</td>
                    </tr>';
                }

双击可创建一个动态选项卡，用于从与此ID关联的数据库中检索其他数据。这也很好，将创建一个新选项卡并检索数据

    //Tabs
$('body').on('dblclick', '.tabData', function () {
    var tab_id = $(this).attr("id");
    addTab(tab_id);
});

function addTab(tab_id) {
    // If tab already exist in the list, return
    if ($("#li"+tab_id).length != 0) {
        $("#navTabs li").removeClass("active");
        $("#client0").removeClass("active");
        $("#li"+tab_id).addClass("active");
        $("#client"+tab_id).addClass('active').show();
        //return;
    } else {
        $("#navTabs li").removeClass("active");
        $("#client0").removeClass("active");

        // add new tab and related content
        $('ul#navTabs li:last-child').after('<li class="active" id="li' + (tab_id) + '"><a href="#client' + (tab_id) + '" role="tab" data-toggle="tab">Client ' + (tab_id) + ' <button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (tab_id) + ');"><i class="fa fa-remove"></i></button></a>');

        loadClientData(tab_id);
//$('div#tabContent div:last-child').after('<div class="tab-pane" id="client' + (tab_id) + '"><p>Content tab ' + (tab_id) + '</p></div>');

        // set the newly added tab as current
        $("#client"+tab_id).addClass('active').show();
    }
}

function loadClientData(tab_id) {
    $("#tabContent").empty();
    $.ajax({
        type: "GET",
        url: "clienten_data_load.php?id='+tab_id",

        success: function(data) {
            //empty(data);
            $("#tabContent").text(data);

        }
    });
}

})

从这里开始就出了问题，我不知道如何解决这个问题

如果我回到第一个创建的动态选项卡之后的第一个选项卡，那么它包含与动态创建的选项卡相同的数据

我想做什么：

第一个选项卡：提供具有大量客户端数据的所有客户端的概述

动态选项卡：最多有10个选项卡。每次双击都会创建一个动态选项卡，最多10个。选项卡的内容必须是与相应ID关联的所有其他客户端数据

如何确保每次双击都会创建一个附加选项卡，而不替换其他选项卡的内容

---

希望我能解释清楚。

您的PHP应该返回一个包含子数组的行的数组JSON作为行内容，而不是HTML。因此，将您的返回构建为一个数组，然后使用json_encode返回。接下来，您需要在AJAX成功方法中运行数组，并简单地填充内容。我在我的手机上，所以我现在无法提供一个示例，如果仍然需要，我将稍后更新此示例。就目前而言，这个概念应该是可行的