Creating a table structure using JQuery

Question

In my application, there is a view page to show the table of Attributes name as the header and its value filled by many people below. Like

Name Age salary
  a   22  18912
  b   23   89972
  c   23    781273

i want it like above ..
But i am getting it as

Name Age Salary
 a   22  18912  b 23 89972 23 781273

I am using JQuery to retrieve these values from my Mysql table and from my Cakephp controller code to view it ..

<head>
  <script type="text/javascript">
    $(document).ready(function(){
      var ht = $.ajax({
        type: "GET",
        url: "http://localhost/FormBuilder/index.php/admins/viewEntries/"+formid,
        async: false
      }).responseText;
      var myObject = eval('(' + ht + ')');
      var data = myObject;var last;
      $.map(data.labels, function(i){
        last=i.label;
        $("<th>"+i.label+"</th> ").appendTo("#headers");
      return i.label;});

      var htm = $.ajax({
        type: "GET",
        url: "http://localhost/FormBuilder/index.php/admins/viewResults/"+formid,
        async: false
      }).responseText;
      var myObject1 = eval('(' + htm + ')');
      var data1 = myObject1;
      $.map(data1.values, function(i){
        $("<td>"+i.value+"</td> ").appendTo("#body");
        if(last==i.label){
          // where i thought to create a new row for 2 row
        }
      return i.value;});
    });
  </script>
</head>
</body>
  <table class="entries" cellspacing="0" cellpadding="3" border="1">
    <tr id="headers"></tr>
    <tr id="body"></tr>
  </table>
</body>

How to make a new row to display the 2nd and 3rd row values in the new row..Please suggest me.....

score 1 · Answer 1 · answered Jul 31 '09 at 11:30

1

To create a new row use

$('table.entries').append('<tr></tr>');

You may want to create the HTML for the whole row before appending it because it will be much quicker.

answered Jul 31 '09 at 11:30

RaYell

69,610
20
126
152

score 1 · Answer 2 · edited May 23 '17 at 12:30

Looking at your code, a couple of things strike me:

You have a closing body tag after your header. However, consider putting your JS in a separate file. Add the script reference just above your final closing body tag (it’s good to add these as close as possible to the foot of the page)

You are using eval(). I'm guessing the htm variable is JSON? You could consider using JSON.parse() from the json2.js available from JSON.org.

See if this post sways you at all. Why is using the JavaScript eval function a bad idea?

Otherwise, the above answer should suffice. You could give the table an ID, as this selector is the fastest.

With additions such as this, its best to construct all your html within the loop, and then to do your append in one operation.

Creating a table structure using JQuery

2 Answers2