使用Ajax来呈现一个HTML表格 [英] Use Ajax to render a html table

问题描述

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

I would like to know how to realize following project

其实我有一个PHP code这使得表

Actually I have a php code which renders a table

<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阵列）。

So far so good, however I want to build many tables like above based on action from user. I mean he will have a list of items (like choice 1, choice 2, choice 3...) and then by clicking this it will render without reloading the page above html (based on new allinfool array).

我的意思是我想通过Ajax来做到这一点。到目前为止，我可以管理阿贾克斯，但不渲染上面的html内容。 我可以设法使后面一个数字或者一个文本，但在这种情况下，它是比较复杂的，因为HTML是PHP的混合。 能否请你帮我弄清楚如何实现这一阿贾克斯技术？

My point is I want to do it via Ajax. So far I could manage Ajax but not to render above content of html. I could manage to render back one number or one text but in this case it is more complicated since html is mixed with php. Could you please help me to figure out how to realize this Ajax technique?

推荐答案

把你的code。在文件中像 table.php 然后从的index.php 使用jQuery来调用它，使表：

Put your code in file like table.php then from the index.php use Jquery to call it and render the table:

HTML：

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

记者：

$(document).ready(function () {

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

});

每当你会点击该按钮就会呈现一个新的表追加到渲染元素

这篇关于使用Ajax来呈现一个HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！