Ankit Lamba Ankit Lamba - 1 year ago 64
HTML Question

Getting all the <td> in same row

I am creating a table dynamically through JSON data, but getting all

<td>
elements in same
<tr>
instead of two different rows.

JavaScript part :

$('button').click(function() {
var str = '[{"callType":"IN","extension":"150","name":"avis","phoneNumber":"9876541230","skill":"English","status":"INCALL","time":"10:50:23"},{"callType":"OUT","extension":"857","name":"sys","phoneNumber":"9658741235","skill":"Hindi","status":"WAITING","time":"08:40:51"}]';

var list = JSON.parse(str);
for (var i = 0; i < list.length; i++) {

var tr = $('#t').append('<tr class="laOriginal" value="user"></tr>');
var radioBtn = $('<input type="radio" name="radioAgent" value="' + list[i].name + '" />" id="radioAgent' + list[i].name + '"');
tr.append(radioBtn);
tr.append("<td>" + list[i].name + "</td>");
tr.append("<td>" + list[i].extension + "</td>");
tr.append("<td>" + list[i].skill + "</td>");
tr.append("<td>" + list[i].phoneNumber + "</td>");
tr.append("<td>" + list[i].status + "</td>");
tr.append("<td>" + list[i].callType + "</td>");
tr.append("<td>" + list[i].time + "</td>");
}
});


Fiddle : Fiddle

How can I get data in two different rows?

Answer Source

This line:

var tr = $('#t').append('<tr class="laOriginal" value="user"></tr>');

Actually returns the jQuery object relating to $('#t'), not the generated <tr> element. You should swap the syntax around and use appendTo():

var tr = $('<tr class="laOriginal" value="user"></tr>').appendTo('#t');

jsFiddle Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download