目錄
一、前言
上一篇介紹了DHTML對象_window_document的一些案例效果，詳見可參考：web快速入門之基礎篇-js：3_2、DHTML對象_window_document（案例效果演示）由於篇幅過長打算在這篇博文繼續整理一些案例
二、js代碼實例演示
1、簡易購物車01_數量變化
（1）實例代碼
我們先來看看一個例子，如下代碼：簡易購物車01_數量變化.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="簡易購物車01.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<h1>我的購物車</h1>
<table border="1">
<tr>
<td>名稱</td>
<td>價格</td>
<td>數量</td>
<td>小計</td>
</tr>
<tr>
<td>aaa</td>
<td>10.00</td>
<td>
<!-- this指向本元素對象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>10.00</td>
</tr>
<tr>
<td>bbb</td>
<td>20.00</td>
<td>
<!-- this指向本元素對象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>20.00</td>
</tr>
</table>
</form>
</body>
</html>
接下來我們來看看 js 代碼：簡易購物車01.js
// 購物車某商品數量加1操作
function add(btnObj){
//parentNode---父節點
//childNodes---所有的子節點，包括標籤，還包括空
var nodes = btnObj.parentNode.childNodes;
//遍歷所有節點
//如果節點的名稱爲"INPUT"，節點的類型爲"text"
//那麼獲取此節點的value值，然後加1，賦值給它自己
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
//錯誤：var str = document.getElementById();
var str = nodes[i].value;
var n = parseInt(str);
n++;
nodes[i].value = n;
}
}
}
//購物車某商品數量減1操作
function sub(btnObj){
var nodes = btnObj.parentNode.childNodes;
for(var i=0; i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
var str = nodes[i].value;
var n =parseInt(str);
if(n>=1){
n--;
nodes[i].value = n;
}
}
}
}
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
此案例：主要演示一個簡易購物車表格的建立，以及它的數量是可以變化的。下一個案例，我們將在它的基礎上同步價格的變化，也是爲了方便大家理解和查看，所以分開寫成兩個案例
2、簡易購物車02_數量價格同步
（1）實例代碼
我們先來看看一個例子，如下代碼：簡易購物車02_數量價格同步.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="簡易購物車02.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<h1>我的購物車</h1>
<table border="1" id="shoppingCart">
<tr>
<td>名稱</td>
<td>價格</td>
<td>數量</td>
<td>小計</td>
</tr>
<tr>
<td>aaa</td>
<td>10.50</td>
<td>
<!-- this指向本元素對象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>10.50</td>
</tr>
<tr>
<td>bbb</td>
<td>20.00</td>
<td>
<!-- this指向本元素對象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>20.00</td>
</tr>
</table>
總計：<span id="sum">30.50</span>
</form>
</body>
</html>
接下來我們來看看 js 代碼：簡易購物車02.js
function add(btnObj){
var nodes = btnObj.parentNode.childNodes;
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
//錯誤：var str = document.getElementById();
var str = nodes[i].value;
var n = parseInt(str);
n++;
nodes[i].value = n;
}
}
calTotal();
}
function sub(btnObj){
var nodes = btnObj.parentNode.childNodes;
for(var i=0; i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
var str = nodes[i].value;
var n =parseInt(str);
if(n>=1){
n--;
nodes[i].value = n;
}
}
}
calTotal();
}
//計算價格
function calTotal(){
//getElementById---精確的查詢單個元素對象，適用於元素已知
var table = document.getElementById("shoppingCart");
//document.getElementsByTagName("input")---元素節點的數組，用於查詢某種標籤
//obj.getElementsByTagName("input")---在obj的範圍裏進行查找
var rows = table.getElementsByTagName("tr");
var total = 0;
//for循環從下標1開始，第一行表頭爲下標爲0，以此可過濾掉
for(var i=1;i<rows.length;i++){
var curRow = rows[i];
//價格值
var price = parseFloat(curRow.getElementsByTagName("td")[1].innerHTML);
//數量值
var q = parseInt(curRow.getElementsByTagName("td")[2].getElementsByTagName("input")[1].value);
//當前某商品總價
var sum = price*q;
//toFixed方法可把 Number 四捨五入爲指定小數位數的數字
//這裏是保留小數後2位
curRow.getElementsByTagName("td")[3].innerHTML = sum.toFixed(2);
//每次循環進行累加
total +=sum;
}
document.getElementById("sum").innerHTML = total.toFixed(2);
}
（2）效果演示
用谷歌瀏覽器打開運行，效果如下：
