Javascript put data in columns table

Question

I have a table which I want to put in the data that I get from ajax call in columns instead of rows here is the table body code

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

Here is the JavaScript code that put the data into the table

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

this is the current output Desired output

Thank you very much

check this out stackoverflow.com/questions/30989927/…

fedesc
– fedesc

2019-03-19 09:15:29 +00:00
Commented Mar 19, 2019 at 9:15 — fedesc
– fedesc, Commented Mar 19, 2019 at 9:15
thank you for your answer i tried it but i didn't work

mohamed adel
– mohamed adel

2019-03-19 09:32:43 +00:00
Commented Mar 19, 2019 at 9:32 — mohamed adel
– mohamed adel, Commented Mar 19, 2019 at 9:32

CodeBoyCode · Accepted Answer · 2019-03-19 11:02:38Z

1

and I think I understood what you meant, probably best just to add id's to each <tr> and then append the value to them, like below.

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

edited Mar 19, 2019 at 11:02

answered Mar 19, 2019 at 10:40

CodeBoyCode

2,27715 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mohamed adel Over a year ago

Amazing thank you very much works like a charm Exactly what i wanted to do

CodeBoyCode Over a year ago

awesome! this isn't the cleanest code ever, feel free to clean it up, i like having examples that people can see what's happening and learn from it :)

Collectives™ on Stack Overflow

Javascript put data in columns table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related