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

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

2 个答案: