Javascript将数据放在列表中

Question

我有一个表格，我想将我从 ajax 调用中获得的数据放入列而不是行中，这里是表格正文代码

<tbody id="tableData-marketMonth">
    <tr>
        <th>Leads</th>
    </tr>
    <tr>
        <th>Full Year Cost</th>
    </tr>
    <tr>
        <th>{{date('F')}} Share of Cost</th>
    </tr>
    <tr>
        <th>Cost per Lead</th>
    </tr>
</tbody>

这是将数据放入表中的 JavaScript 代码

//Monthly Marketing Cost Report
$.get('/dashboard/costs', function(data){
  $.each(data,function(i,value){
    var tr =$("<tr/>");

    tr.append($("<th/>",{
      text : value.olxTotal
    })).append($("<th/>",{
      text : value.budget_total_year
    })).append($("<th/>",{
      text : value.budget_total_month
    })).append($("<th/>",{
      text : value.budget_per_lead
    }))
    $('#tableData-marketMonth').append(tr);
  })  
})

这是当前输出 期望的输出

非常感谢

Answer 1

我想我明白你的意思，可能最好只是将 id 添加到每个 <tr>，然后将值附加到它们，如下所示。

HTML

<table>
    <tbody id="tableData-marketMonth">
        <tr id="leads">
            <th>Leads</th>
         </tr>
         <tr id="fyc">
             <th>Full Year Cost</th>
         </tr>
         <tr id="soc">
             <th>{{date('F')}} Share of Cost</th>
         </tr>
         <tr id="cpl">
             <th>Cost per Lead</th>
         </tr>
    </tbody>
</table>

jQuery

//Monthly Marketing Cost Report
$.get('/dashboard/costs', function(data){
  $.each(data,function(i,value){
      var leads = $('#leads');
      var budget_total_year = $('#fyc');
      var budget_total_month = $('#soc');
      var budget_per_lead = $('#cpl');

      leads.append('<td>' + value.olxTotal + '</td>');
      budget_total_year.append('<td>' + value.budget_total_year + '</td>');
      budget_total_month.append('<td>' + value.budget_total_month + '</td>');
      budget_per_lead.append('<td>' + value.budget_per_lead + '</td>');
  })  
})