CODEWITHSUNDEEP
jquery
useranon
useranon

Reputation: 29514

Creating a table structure using JQuery

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.....

Upvotes: 0

Views: 387

Answers (2)

Mutation Person
Mutation Person

Reputation: 30498

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.

Upvotes: 1

RaYell
RaYell

Reputation: 70414

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.

Upvotes: 1

Related Questions