使用 $.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>);

Answer 2

这是一个 Jfiddle，如果您使用 .html 并附加到页面上的空表，您可以附加从您的 ajax 查询返回的 var 内容。 http://jsfiddle.net/L4G79/1/

你的代码看起来像

 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];


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