在同一行中获取所有 <td>答案

【问题标题】：Getting all the <td> in same row在同一行中获取所有 <td>
【发布时间】：2014-02-03 20:03:54
【问题描述】：

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

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

小提琴：Fiddle

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

【问题讨论】：

你不应该连接"<td>" + list[i].name + "</td>"：如果名字中有</td>会发生什么？您应该改用text 函数。
@dystroy 如果名称中有 HTML，那么该 HTML 的结果会显示在 <td> 中；如果他们至少可以保证它是正确的 HTML，那并不是真正的问题。

标签： jquery html json html-table

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的 var tr 是 $('#t') 的值，而不是附加代码的值。

你要做的是：http://jsfiddle.net/s3rbG/5/

也就是说，将新创建的 tr 保存在您的 var 中，然后将其附加到表中。这样，当您将 td 元素附加到它时，它们会被添加到 tr，而不是 table。

【讨论】：

【解决方案3】：

这一行：

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

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

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

jsFiddle Demo

【讨论】：