从嵌套数据源创建表格单元格
从嵌套数据源创建表格单元格
提问于 2018-06-09 03:11:02
我正在创建一个动态的表格行。我的数据源如下所示
data = [
{
"id": 11,
"tests": [{
"id": 2,
"name": "Glucose Level"
},
{
"id": 4,
"name": "Blood Oxygen"
}
],
"carepathway": {
"id": 16,
"name": "General Check-Up",
"slug": "general_check_up",
"dynamic_field": null
}
}
]这就是我如何创建我的表。
$.each(data, function(key, val) {
var tr = $("<tr />");
tr.append($('<td>').append("<p>" + val.carepathway.name + "</p>"))
.append(
$('<td>').append(
$.each(val.tests, function(k, v) {
var $test_controls = $("<div/>", {
"class": "controls"
})
$test_controls.append(
$("<label>", {
"class": "checkbox",
"name": v.name,
"text": v.name,
'id': v.id
}).append(
$("<input>", {
"type": "checkbox",
"value": v.name,
'id': v.id
})
)
)
})
))
$("#patient_care_pathway_table tbody").append(tr);
});第一个<td>值来得很好，但是第二个<td>没有得到任何东西，这里我做错了什么？
第二个<td>应该包含带有标签的复选框，如下所示
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-09 03:32:42
问题是您将$.each的返回值undefined附加到第二个td。使用$.map而不是$.each
tr.append($('<td>').append("<p>" + val.carepathway.name + "</p>"))
.append(
$('<td>').append(
$.map(val.tests, function(k, v) { // use map here instead of each
var $test_controls = ...;
...
return $test_controls; // don't forget to return the element (read about map)
})
))Stack Overflow用户
发布于 2018-06-09 03:36:12
我会把循环放在外面，而不是像你所做的那样以菊花链的方式把它放在append函数内部，它会为循环返回undefined。这应该是可行的：
$.each(data, function(key, val) {
var tr = $("<tr />");
tr.append($('<td>').append("<p>" + val.carepathway.name + "</p>"));
var second_td = $('<td>'); // Have a variable for the second td so that you can access it later
$.each(val.tests, function(k, v) { // Process content of your second td
var $test_controls = $("<div/>", {
"class": "controls"
})
$test_controls.append(
$("<label>", {
"class": "checkbox",
"name": v.name,
"text": v.name,
'id': v.id
}).append(
$("<input>", {
"type": "checkbox",
"value": v.name,
'id': v.id
})
)
)
second_td.append($test_controls);
});
tr.append(second_td); // Once done, add it back to tr
$("#patient_care_pathway_table tbody").append(tr);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50767067
复制相关文章
相似问题