Question

我试图迭代这个过程..使用jquery中的for循环方法（each（）;）但是我无法实现它。我知道如何在不添加更多carItem的情况下手动创建更多“行”吗？谢谢！

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

Answer 1

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

所以基本上，将您的购物车摘要放在一个数组中。循环遍历此数组，获取基本模板并使用数据进行修改。但是改变模板应该在我的上一条评论中起作用，我不喜欢我添加的技巧： - ）

Answer 2

您也可以在此处尝试此解决方案。它还使用来自jquery的clone并附加该项。

http://jsfiddle.net/L89kw/5

顺便说一句：在将元素附加到表后，添加.fadeIn()（我在样本中使用animate({opacity: 1})）非常重要。没有阅读文档，但我认为，append不返回新元素（至少不在jquery 1.7.2中）

Answer 3

克隆很不错，但是您可以采取下一步措施并使用像把手一样的东西http://handlebarsjs.com/我有很好的使用经验

另一种替代JQUERY模板插件http://api.jquery.com/category/plugins/templates/

or knockout.js对您的代码影响更大，因为它是一个更广泛的框架。

Answer 4

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

     });
});

如何使用jquery使用each（）方法填充此表

4 个答案: