使用$ .ajax和jQuery将数据显示为表格

如何解决使用$ .ajax和jQuery将数据显示为表格

|| 我是jQuery和PHP的新手。 我正在开发一个网页，以显示从数据库获取的一组记录。在这里，我使用了PHP和jQuery。 我需要将一组记录显示为表格。使用PHP从MysqL数据库中检索数据。行集使用

json_encode()

作为字符串传递到html页面。 问题是我无法在表格中逐行显示这些数据。我正在使用由

<div>

创建的表格。因此，我需要知道如何逐行显示此数据字符串并分隔每一列的值。 这是我只显示一行的操作，但是数据没有显示为表格。也没有编译错误。我需要帮助来扩展它来显示多行。 demo.html（第I页将显示记录）：

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

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

解决方法

        这是一个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>\");

    ,        试试这个...。

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