javascript - Javascript将数据放入列表

我有一个表，我想将从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);
  })
})

这是当前输出

  所需的输出
  

非常感谢你

最佳答案

我想我理解了您的意思，最好将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>');
  })
})