将所有<td>放在同一行中

Question

我正在通过JSON数据动态创建一个表,但是将所有<td>元素放在同一个<tr>而不是两个不同的行中.

JavaScript部分:

$('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>");
}
});

小提琴:小提琴

如何在两个不同的行中获取数据？

Answer 1

这一行:

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

实际上返回与之相关的jQuery对象$('#t'),而不是生成的<tr>元素.您应该交换语法并使用appendTo():

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

jsFiddle演示