php - 使用 Ajax 渲染 html 表格

Question

我想知道如何实现以下项目

实际上我有一个渲染表格的 php 代码

<table id = "oldata" class ="table table-bordered">

    <thead>
            <tr class ="success">
                    <th class="text-center">Stage</th>
                    <th class="text-center">REQUEST</th>
                    <th class="text-center">REPLY</th>
            </tr>
        </thead>

    <tbody>
<?php

    foreach($allinfool as $infool){
        print("<tr>");
        print("<td>{$infool["Stage"]}</td>");
        print("<td class='text-left'>" .nl2br($infool["comment"])."</td>");
        print("<td class='text-left'>" .nl2br($infool["resultcom"]). "</td>");
        print("</tr>");
    }

?>
    </tbody>

</table>

到目前为止一切顺利，但是我想根据用户的操作构建许多像上面这样的表。 我的意思是他将有一个项目列表(例如选择 1、选择 2、选择 3...)，然后通过单击它，它将呈现，而无需重新加载 html 上方的页面(基于新的 allinfool 数组)。

我的观点是我想通过 Ajax 来做到这一点。到目前为止，我可以管理 Ajax，但不能渲染上面的 html 内容。 我可以设法渲染回一个数字或一个文本，但在这种情况下它会更复杂，因为 html 与 php 混合在一起。 您能帮我弄清楚如何实现这种 Ajax 技术吗？

Answer 1

将代码放入 table.php 等文件中，然后从 index.php 使用 Jquery 调用它并呈现表格:

HTML:

<button id="rendertable">Render new table</button>
<div id="render"></div>

JS:

$(document).ready(function () {

    $('#rendertable').click(function () {
        $.ajax({
            url: "table.php",
            success: function (response) {
                $('#render').append(response);
            }
        });
    });

});

每次单击该按钮时，它都会呈现一个附加到 render 元素的新表格