0

このプロセスを反復しようとしています..jquery（each（）;）でforループメソッドを使用していますが、それを実現することはできません。手動で実行せずにcarItemsを追加するたびに、どのようにしてより多くの「行」を作成できるか考えてみてください。ありがとう！

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

4 に答える 4

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

つまり、基本的に、カートの概要を配列にまとめます。この配列をループし、基本的なテンプレートを取得して、データで変更します。しかし、私の最後のコメントでテンプレートがどのように機能するかでそれを変更してください、私が追加した私のトリックは好きではありません:-)

于 2012-09-27T20:25:20.357 に答える
1

ここでこのソリューションを試すこともできます。また、jqueryのcloneを使用して、アイテムを追加します。

http://jsfiddle.net/L89kw/5

ところで：要素をテーブルに追加した後、（サンプルで.fadeIn()使用した）を追加することが重要でした。ドキュメントを読んでいませんでしたが、appendは新しい要素を返さないと思います（少なくともjquery 1.7.2では）animate({opacity: 1})

于 2012-09-27T20:40:27.247 に答える
0

クローンは素晴らしいですが、次のステップに進んで、ハンドルバーのようなものを使用することができますhttp://handlebarsjs.com/私はそれで良い経験をしました

別の代替JQUERYテンプレートプラグインhttp://api.jquery.com/category/plugins/templates/

または、より広いフレームワークとしてコードに大きな影響を与えるknockout.js。

于 2012-09-27T20:19:27.393 に答える
0 
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');

     });
});
于 2012-09-27T20:29:05.697 に答える