将td添加到tr中，然后再添加到tbody中。

Question

我有以下代码：

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没有附加到tr？我只获得了tr中的文本。

- guradio

---

无法将三元表达式的结果与其他内容连接起来。请在.append()之外解决三元表达式，并将结果放置在连接中。 - Randy Casburn

@RandyCasburn 或使用括号... 不需要移出。 - epascarello

Answer 1

您需要将使用三元运算符的表达式用括号(...)包裹起来，例如：

tr.append("<td>" + (data_object[ctr].data1 ? data_object[ctr].data1 : '') + "</td>");

所以，它们的评估结果如您所预期。否则，您的表达式将按以下方式进行评估：

tr.append(("<td>" + data_object[ctr].data1) ? data_object[ctr].data1 : ('' + "</td>"));

由于("<td>" + data_object[ctr].data1)将被评估为true，因此将缩小为data_object [ctr] .data1 。

$(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>

- Shidersz