在HTML表格中打印Jquery数组

Question

我有一个名为

的函数

only

我在jquery ajax get调用中调用了这个函数。数据传递给函数以在表中显示它。现在这种方式是不可接受的，因为有很多格式问题。使用上面的代码，它看起来像这样：

我需要表格元素显示，如果我用角度编码或用手把快递编码

function diamondDetails(data) {
  var diamondVal = [];
  var diamondNos = [];
  var diamondWeight = [];
  var rate = 0;
  var str = '';
  var shape = data.acf.shape;
  var checkedVal = $('#diamond-cut:checked').val().toUpperCase();
  for (var i = 0; i < data.acf.gold_details.length; i++) {
    if (data.acf.diamond_global_rate[i].diamond_cut === checkedVal) {
      rate = data.acf.diamond_global_rate[i].diamond_rate;
      for (var j = 0; j < data.acf.diamond_component.length; j++) {
        diamondNos[j] = checkedVal + ' ' + shape + ' - ' + data.acf.diamond_component[j].diamond_nos + ' Nos.';
        diamondVal[j] = 'Rs. ' + (rate * data.acf.diamond_component[j].d_component_weight);
        diamondWeight[j] = data.acf.diamond_component[j].d_component_weight + ' ct';
        str += "<tr>";
        str += '<td class="td1">' + diamondNos[j] + "</td>";
        str += "<td>Rs. " + rate + "/ct </td>";
        str += "<td>" + diamondWeight[j] + "</td>";
        str += "<td>" + diamondVal[j] + "</td>";
        str += "</tr>";
      }
    }
  }

  $("#diamond-comp").html(str);
}

HTML部分：

{{#each details}}
<tr>
<td>{{component}}</td>
<td>{{rate}} </td>
<td>{{weight}} </td>
<td>{{value}} </td>
</tr>
{{/each}}

Answer 1

你的JS很好，问题是你试图把一个div放在桌子的中间。这打破了你的桌子。您需要将行直接追加到表中，而不是直接附加到表标记中间的随机div。

您可以使用insertAfter() jQuery方法。删除div并在其前面加上一行ID。

以下是一个例子：jsFiddle

for(i=0;i<data.length;i++){
    d = data[i];
    str = "<tr><td>"+d[0]+"</td><td>"+d[1]+"</td><td>"+d[2]+"</td><td>"+d[3]+"</td></tr>";
    $(str).insertAfter("#diamond-comp");
}