มาเริ่มจากในส่วน html ก่อน
<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>
ตัว class template เป็น template row ของเราครับ ซึ่งเมื่อจะเพิ่มแถวก็จะ copy row และทำการ set ค่าให้คับ item ต่าง ๆ ครับ
function ในการเพิ่มแถวครับ
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;
}
รับ แถวและ object ของ item เพื่อ set ค่าครับ
ต่อมาเป็น script ในการเพิ่มแถวครับ
var newRow = $('#cart .template').clone().removeClass('template');
var cartItem = {
name: 'Glendatronix',
qty: 1,
total: 450
};
template(newRow, cartItem)
.appendTo('#cart')
.fadeIn();
อ่าฮะ
แถว 1 : var newRow = $('#cart .template').clone().removeClass('template');
เป็นการ clone แล้วเก็บไว้ใน newRow และทำการ remove คลาส template ออก
จากนั้นเป็นการสร้าง object ของ row นั้น
var cartItem = {
name: 'Glendatronix',
qty: 1,
total: 450
};
และใชั function template เพื่อสร้างแถวจริง ๆ
template(newRow, cartItem)
.appendTo('#cart')
.fadeIn();
ผลลัพธ์ครับ
-----------------------------------------------------------------------------------------------------
ตัวอย่างโค้ดท้ายบทครับ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
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;
}
</script>
<head>
<body>
<table id="cart" border="1" cellspacing="0" cellpadding="4">
<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>
<script type="text/javascript">
var newRow = $('#cart .template').clone().removeClass('template');
var cartItem = {
name: 'Glendatronix',
qty: 1,
total: 450
};
template(newRow, cartItem)
.appendTo('#cart')
.fadeIn();
</script>
</body>
</html>
จากตัวอย่างนี้เราสามารถประยุกต์ใช้ได้กับการถึงข้อมูลผ่าน ajax แล้วทำการเพิ่มแถวในตารางเราได้ครับ
ที่มา : JQUERY NOVICE TO NINJA โดย EARLE CASTLEDINE & CRAIG SHARKIE
The king casino no deposit bonus, free spins, bitcoin - CommunityKhabar
ตอบลบNo deposit 바카라 사이트 bonus, worrione.com free spins, bitcoin. No deposits bonus. No withdrawals, bitcoin no deposit wooricasinos.info bonuses, free deccasino spins, communitykhabar bitcoin, 10k followers.