在HTML表格

Question

印刷Jquery的數組我有一個函數調用

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

和我打電話jQuery的阿賈克斯獲得調用這個函數。數據被傳遞給函數以在表中顯示。現在這種方式是不可接受的，因爲有很多格式問題。與上面的代碼，它看起來像這樣：

我需要的表元素出現，因爲它會如果我在角度編碼此或與車把表達

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

HTML部分：

<h3 class="subtitle">Price Breakup</h3> 

<table class="table" cellspacing="0"> 
    <tr class=""> 
    <td class="bold-heading">Component</td> 
    <td class="bold-heading">Rate</td> 
    <td class="bold-heading">Weight</td> 
    <td class="bold-heading">Value</td> 
    </tr> 
    <tr> 
    <td class="bold-heading">Gold - <span class="purity"></span> 
    </td> 
    <td id="gold_rate"></td> 
    <td class="gold_weight"></td> 
    <td id="gold_value"></td> 
    </tr> 
    <tr> 
    <td class="bold-heading" colspan="4">Diamonds</td> 
    </tr> 
    <tr> 
    <td class="td1">GH-VS Round - 36 Nos.</td> 
    <td>Rs. 71,000/ct</td> 
    <td>0.151 ct</td> 
    <td>Rs. 10,721</td> 
    </tr> 
    <div id="diamond-comp"> 

    <!--Want it to appear like this: <tr> 
               <td ></td> 
               <td>Rs. 71,000/ct</td> 
               <td>0.151 ct</td> 
               <td>Rs. 10,721</td> 
              </tr> --> 
    </div> 
    <tr> 
    <td class="bold-heading" colspan="2">Making Charges</td> 
    <td></td> 
    <td id="making-charges"></td> 
    </tr> 
    <tr> 
    <td class="bold-heading" colspan="2">VAT</td> 
    <td></td> 
    <td id="vat"></td> 
    </tr> 
</table> 

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