ขอถามเรือง javascript code คะ ต้องการ udpate subtotal ในแต่ละ rows ใน table โดยการใช้ qty*price ตาม code ด้านล่างคะ แต่ติด error ขึ้นมาทุกครั้งว่า table undefined คะ ไม่ทราบว่าจะแก้ได้อย่างไรบ้างคะ ขอบคุณคะ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้
function updateSubtotal() {
var subTotal = 0;
var tables = document.getElementsByTagName("table")[0];
var r = this.parentNode.parentNode.rowIndex;
var j = document.getElementsByTagName(".price").cellIndex;
var s = document.getElementsByTagName(".subtotal").cellIndex;
var price = tables[r].cells[j].value;
var quantity = document.getElementsByTagName("input").value;
var subAmount = price * quantity;
subTotal += Number(subAmount);
// set total for the row
document.getElementsByTagName('table').rows[r].cells.innerHTML = '$' + subTotal.toFixed(2);
}
updateTotal();
}
ด้านล่างนี้คือ original code ทั้งหมดคะ ขอบคุณคะ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Shopping Cart</title>
<style>
body { font-family:Segoe UI, Arial, sans-serif; width:800px; }
table, th, td { border:1px solid #999; border-collapse:collapse; }
table { width:798px; }
th, td { padding:5px; text-align:center; }
input[type=number] { width:50px; text-align:center; }
.cart-summary th { text-align:right; }
a { text-decoration:none; color:#00f; }
img { border:0; margin-right:10px; vertical-align:middle; }
.description { text-align:left; }
.remove { color:#c00; }
.remove:hover { font-weight:bold; }
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
window.onload = setupCart;
function setupCart() {
var qtyInputs = document.querySelectorAll( 'input' );
for ( var i = 0; i < qtyInputs.length; i++ ) {
qtyInputs[ i ].oninput = updateSubtotal;
}
updateTotal();
}
function updateTotal() {
var total = 0;
var subTotals = document.querySelectorAll( '.subtotal' );
for ( var i = 0; i < subTotals.length; i++ ) {
var amount = subTotals[ i ].innerHTML.match( /[0-9]+.[0-9]+/ );
total += Number( amount );
}
document.querySelector( '#total' ).innerHTML = '$' + total.toFixed( 2 );
}
</script>
</head>
<body>
<h2>Shopping Cart</h2>
<p>Please review the contents of your basket and click "Go To Checkout" when you are happy to proceed.</p>
<table>
<tr>
<th>Description</th>
<th>Each</th>
<th>Qty</th>
<th>subtotal</th>
</tr>
<tr class="item">
<td class="description"><a href=""><img src="red-shirt.jpg" alt="" />Red Crew Neck T-Shirt</a></td>
<td class="price">$15.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$15.00</td>
</tr>
<tr class="item">
<td class="description"><a href=""><img src="tropical-shirt.jpg" alt="" />Blue Tropical Floral Print T-Shirt</a></td>
<td class="price">$25.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$25.00</td>
</tr>
<tr class="item">
<td class="description"><a href=""><img src="black-sneakers.jpg" alt="" />Black Canvas Lace Up Sneakers</a></td>
<td class="price">$35.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$35.00</td>
</tr>
<tr class="item">
<td class="description"><a href=""><img src="black-grey-jacket.jpg" alt="" />Black and Grey Hooded Jacket</a></td>
<td class="price">$40.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$40.00</td>
</tr>
<tr class="item">
<td class="description"><a href=""><img src="black-sunglasses.jpg" alt="" />Black Retro Sunglasses</a></td>
<td class="price">$15.00</td>
<td><input type="number" value="1" min="0" /></td>
<td class="subtotal">$15.00</td>
</tr>
<tr class="cart-summary">
<td></td>
<td></td>
<th>Total:</th>
<td id="total"></td>
</tr>
</table>
<p><a href="">Continue Shopping</a></p>
<p><a href="">Go To Checkout</a></p>
</body>
</html> 
คำถาม javasript เกี่ยวกับ shopping cart
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้
ด้านล่างนี้คือ original code ทั้งหมดคะ ขอบคุณคะ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้