Question

I’m new to jQuery and PHP.
I’m developing a web page to display a set of records taken from a database. Here I have used PHP and jQuery.
I need to display a set of records as a table. Data is retrieved from a MySQL database using php. Set of rows is passed to the html page as a string using json_encode().

The problem is that I can’t display those data in a table row by row. I’m using a table created with <div>. So I need to know how to display this string of data row by row and separating the value for each column.

Here is what I have done to display only one row, but the data is not displayed as a table. No compile error either. I need help to extend this to display multiple rows too.

demo.html (page I’m going to display the records):

    <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 (retrieving data from the database):

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


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

If someone can help me it would be a great.

Answer 1

Here is a Jfiddle, if you use .html and append to a empty table on your page you can append the var contents returned from your ajax query just the same
http://jsfiddle.net/L4G79/1/

this your code will look something like

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