CODEWITHSUNDEEP
jqueryeach
YoniGeek
YoniGeek

Reputation: 4093

how can I populate this table with the each() method using jquery

Im trying to iterate this process..using the for-loop method in jquery (each();) but I cant make it happen. Any idea how I could create more 'rows' everytime I adding more carItems without doing it manually? thanks! 

   <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>  </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <table id="cart">
            <thead>
              <tr>
                <th>Name</th>
                <th>Qty.</th>
                <th>Total</th>
              </tr>
            </thead>
            <tr class="template" style="display:none;">
              <td><span class="item_name">Name</span></td>
              <td><span class="item_qty">Quantity</span></td>
              <td><span class="item_total">Total</span>.00</td>
            </tr>
          </table>
    </body>

    </html>

    function template(row, cart) {
      row.find('.item_name').text(cart.name);
      row.find('.item_qty').text(cart.qty);
      row.find('.item_total').text(cart.total);
      return row;
    }

    $(document).ready(function(){
      var newRow = $('#cart .template').clone().removeClass('template');
        var newRow_1 = $('#cart .template').clone().removeClass('template');



      var cartItem = 
      {
        name: 'Glendatronix',
        qty: 1,
        total: 450
      };

       var cartItem_1 = {
        name: 'Glendatronix',
        qty: 1,
        total: 450
      };


      template(newRow, cartItem)
        .appendTo('#cart')
        .fadeIn(); 

          template(newRow_1, cartItem_1)
        .appendTo('#cart')
        .fadeIn();   
    });

Upvotes: 0

Views: 591

Answers (4)

Maar10
Maar10

Reputation: 46

var tmpl = $('#cart .template').clone();    

var template = function(cart) {
    var html = tmpl;
    html.find('.item_name').text(cart.name);
    html.find('.item_qty').text(cart.qty);
    html.find('.item_total').text(cart.total);
    return html.html();
}


var cart = [
{
  name: 'Glendatronix 1',
  qty: 1,
  total: 450
},{
  name: 'Glendatronix 2',
  qty: 1,
  total: 450
}];


$.each(cart, function(item) {
   $('#cart').append('<tr>' + template(cart[item]) + '</tr>' );
});

So basically, have your cart summary in an array. Loop through this array, take basic template and modify it with data. But change it with how template should work in my last comment, i don't like my tricks i added :-)

Upvotes: 1

Mark
Mark

Reputation: 6071

You can also try this solution here. It also uses clone from the jquery and appends the item.

http://jsfiddle.net/L89kw/5

BTW: It was important to add the .fadeIn() (i used animate({opacity: 1}) in the sample) after appending the element to the table. Did not read the documentation, but I think, that append doesn't return the new element (at least not in jquery 1.7.2)

Upvotes: 1

Johan
Johan

Reputation: 35194

var cartItems = 
[
    {
        name: 'Glendatronix',
        qty: 1,
        total: 450
    },
    {
        name: 'Glenda',
        qty: 2,
        total: 451
    }
];

$(function(){

     $.each(cartItems, function(){

         var $tr = $('<tr/>')
             .html('<td>' +  this.name + '</td>'); //add names, quantity etc here...
             .appendTo('#cart');

     });
});

Upvotes: 1

Avi Kessel
Avi Kessel

Reputation: 96

Clone is nice, but you can take the next step and use somthing like handlebars http://handlebarsjs.com/ I had good experience with it

Another alternative JQUERY template plugin http://api.jquery.com/category/plugins/templates/

Or knockout.js that has bigger affect on your code as being a wider framework.

Upvotes: 0

Related Questions