我试图迭代这个过程..使用 jquery (each();) 中的 for-loop 方法,但我不能让它发生。知道如何在每次添加更多 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();
});