Home/ Questions/Q 8602823
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:10:53+00:00

Im trying to iterate this process..using the for-loop method in jquery (each();) but I

  • 0

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();   
    });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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 🙂

    • 0