我有下一个代码:
var data_object =[{"data1":"DATA1","data2":"DATA2","data3":"DATA3"}]
var tr;
for (var ctr = 0; ctr < data_object.length; ctr++) {
tr = $("<tr></tr>");
tr.append("<td>" + data_object[ctr].data1 ? data_object[ctr].data1 : '' + "</td>");
tr.append("<td>" + data_object[ctr].data2 ? data_object[ctr].data2 : '' + "</td>");
tr.append("<td>" + data_object[ctr].data3 ? data_object[ctr].data3 : '' + "</td>");
$('#tblAutoMatch tbody').append(tr)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblAutoMatch" class="table table-bordered" width="100%">
<thead>
<tr>
<th class="col-md-1" style="text-align: center; width: 5%;">Data 1</th>
<th class="col-md-1" style="text-align: center; width: 13%;">Data 2</th>
<th class="col-md-1" style="text-align: center; width: 13%;">Data 3</th>
</tr>
</thead>
<tbody></tbody>
</table>
但是,有一个问题:为什么td
没有 append 到tr
?我只在 tr
中获取文本。
最佳答案
您需要将使用三元运算符的表达式用括号 (...)
括起来, 例子:
tr.append("<td>" + (data_object[ctr].data1 ? data_object[ctr].data1 : '') + "</td>");
因此,它们会按照您的预期进行评估。否则你的表达式将被这样计算:
tr.append(("<td>" + data_object[ctr].data1) ? data_object[ctr].data1 : ('' + "</td>"));
并且会缩减为data_object[ctr].data1
因为("<td>" + data_object[ctr].data1)
将被评估为 true
.
$(document).ready(function()
{
var data_object = [
{"data1":"DATA1","data2":"DATA2","data3":"DATA3"}
];
var tr;
for (var ctr = 0; ctr < data_object.length; ctr++)
{
tr = $("<tr>");
tr.append("<td>" + (data_object[ctr].data1 ? data_object[ctr].data1 : '') + "</td>");
tr.append("<td>" + (data_object[ctr].data2 ? data_object[ctr].data2 : '') + "</td>");
tr.append("<td>" + (data_object[ctr].data3 ? data_object[ctr].data3 : '') + "</td>");
$('#tblAutoMatch tbody').append(tr)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblAutoMatch" class="table table-bordered" width="100%">
<thead>
<tr>
<th class="col-md-1" style="text-align: center; width: 5%;">Data 1</th>
<th class="col-md-1" style="text-align: center; width: 13%;">Data 2</th>
<th class="col-md-1" style="text-align: center; width: 13%;">Data 3</th>
</tr>
</thead>
<tbody></tbody>
</table>
关于javascript - 在 tr 中追加 td,然后在 tbody 中追加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54509135/