Adding a new column to html table using javascript

Question

So i have scared some data and saved it on to a CSV file. I am not trying to present this data on to a html page. Since the data saved has only two columns(Item name and Price), it is only displaying those two columns.

I want to add another column next to it, so i can have a "Add to basket" button inside it. I am not sure how i am able to add a new column here.

Can anyone help please? Thank you

 <body>

<!--     Header-->
     <div id="header"> 
      <button type="button" class="button">Basket</button>
     </div>

<!--     CSV FILE DATA WILL APPEAR HERE-->
  <div class="container">
   <div class="table-responsive">
    <div id="order_list"><p id="tableintro"> Choose your desired supermarket</p>
    </div>
   </div>
  </div>    

<!--THIS BUTTON WILL LOAD DATA FROM CSV FILE-->
<div id="sidebar">
         <div align="center">
 <button type="button" name="load_data" id="load_data" class="btn btn-info">Tesco Brent Cross</button>
    </div>
     </div>




<!--Javascript code for Tesco-->

<script>
$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"Tesco.csv",
   dataType:"text",
   success:function(data)
   {
    var tesco_data = data.split(/\r?\n|\r/);
    var table_data = '<table class="table table-bordered table-striped">';
    for(var count = 0; count<tesco_data.length; count++)
    {
     var cell_data = tesco_data[count].split(",");
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++)
     {
      if(count === 0)
      {
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }
      else
      {
       table_data += '<td>'+cell_data[cell_count]+'</td>';
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    $('#order_list').html(table_data);
   }
  });
 });

});
</script>

Instead of adding </tr>, add <td><button>blabla</button></td></tr>. Seems straightforward? Just differentiate for the first, header row. — trincot
– trincot, Commented Apr 22, 2020 at 19:36
Just update the question to show what you actually tried, and what output it gives, and how that does not meet your expectations. — trincot
– trincot, Commented Apr 22, 2020 at 19:55
@RamgithUnniJagajith I've added an answer but edited meanwhile ... please test the latest revision of my answer and let me know if that does the trick ;) — henser
– henser, Commented Apr 22, 2020 at 20:09

henser · Accepted Answer · 2020-04-22 20:02:31Z

1

You have a formatting issue mounting your table. If you only have two cells per row in this case, a second for loop seems like an overkill. Try replacing your for loop with this one instead:

    for (var count = 0; count < tesco_data.length; count++)
    {
     var cell_data = tesco_data[count].split(",");
     var name = cell_data[0];
     var price = cell_data[1];

      if (count === 0)
      {
       table_data += '<tr><th>' + name + '</th><th>' + price + '</th><th>action</th></tr>';
       continue;
      }

     table_data += '<tr><td>' + name + '</td><td>' + price + '</td><td><button type="button">Add to cart</button></td></tr>';
    }

edited Apr 22, 2020 at 20:02

answered Apr 22, 2020 at 19:57

henser

3,3372 gold badges39 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Adding a new column to html table using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related