php - 使用 $.ajax() 和 jQuery 将数据显示为表格

Question

我是 jQuery 和 PHP 的新手。我正在开发一个网页来显示从数据库中获取的一组记录。这里我使用了 PHP 和 jQuery。我需要将一组记录显示为表格。使用 php 从 MySQL 数据库中检索数据。使用 json_encode() 将行集作为字符串传递给 html 页面.

问题是我无法在表格中逐行显示这些数据。我正在使用用 <div> 创建的表.所以我需要知道如何逐行显示这串数据并将每列的值分开。

这是我所做的只显示一行，但数据没有显示为表格。也没有编译错误。我需要帮助来扩展它以显示多行。

demo.html(我要显示记录的页面):

    <div class="table">
<div class="headRow">
    <div class="cell">ID</div>
    <div class="cell">First Name</div>
    <div class="cell">Last Name</div>
    <div class="cell">Age</div>
    <div class="cell">Class</div>


 <script type="text/javascript">
    $(document).ready(function(){

        $.ajax({

            url: 'beta.php' ,
            data:"",
            dataType: 'json',
            success:function(data){
                var elementArray = new Array();         //creating the array
                elementArray = data.split("");          //splitting the string which was passed using json_encode()


                var id = elementArray[0];               //passing values corresponding to the columns
                var fname = elementArray[1];
                var lname = elementArray[2];
                var age = elementArray[3];
                var grade = elementArray[4];


            $("<div>", {                        //creating a new div element and assiging the value and appending it to the column 1
                "class":"cell",
                "text":id
            }) 
            .appendTo("document.body");

            $("<div>", {                        //cloumn 2 value
                "class":"cell",
                "text":fnam
            })
            .appendTo("document.body");

            $("<div>", {                        //cloumn 3 value
                "class":"cell",
                "text":lname
            })
            .appendTo("document.body");

            $("<div>", {                        //cloumn 4 value
                "class":"cell",
                "text":age
            })
            .appendTo("document.body");

            $("<div>", {                        //cloumn 5 value
                "class":"cell",
                "text":grade
            })
            .appendTo("document.body");

            }       

    });

});

 </script>
</div>
</div>

demo.php(从数据库中获取数据):

    $result = mysql_query("SELECT * FROM student WHERE StuId=1",$con) or die (mysql_error());


$resultArray = mysql_fetch_row($result);    
echo json_encode($value);

如果有人能帮助我，那就太好了。

Answer 1

试试这个....

        var id = elementArray[0];              
        var fname = elementArray[1];
        var lname = elementArray[2];
        var age = elementArray[3];
        var grade = elementArray[4];

然后像这样使用这些值创建表....

 $("<table>").appendTo("document.body");


 $("table").html("<tr><td>"+id +"</td><td>"+fname +"</td><td>"+lname +"</td><td>"+age +"</td><td>"+grade +"</td></tr>);