DOM基礎(chǔ)概念狮斗、操作
DOM是什么
DOM全稱為The Document Object Model绽乔，應(yīng)該理解為是一個(gè)規(guī)范，定義了HTML和XML文檔的邏輯結(jié)構(gòu)和文檔操作的編程接口碳褒。
文檔邏輯結(jié)構(gòu)
DOM基礎(chǔ)概念折砸、操作
DOM是什么
DOM全稱為The Document Object Model看疗，應(yīng)該理解為是一個(gè)規(guī)范，定義了HTML和XML文檔的邏輯結(jié)構(gòu)和文檔操作的編程接口睦授。
文檔邏輯結(jié)構(gòu)
DOM實(shí)際上是以面向?qū)ο蠓绞矫枋龅膶?duì)象模型两芳，它將文檔建模為一個(gè)個(gè)對(duì)象，以樹狀的結(jié)構(gòu)組織（本文稱之為“文檔樹”去枷，樹中的對(duì)象稱為“節(jié)點(diǎn)”）怖辆。
每個(gè)文檔包含1個(gè)document節(jié)點(diǎn)，0個(gè)或1個(gè)doctype節(jié)點(diǎn)以及0個(gè)或多個(gè)元素節(jié)點(diǎn)等删顶。document節(jié)點(diǎn)是文檔樹的根節(jié)點(diǎn)竖螃。
如對(duì)于HTML文檔，DOM 是這樣規(guī)定的：
整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)
包含在 HTML 元素中的文本是文本節(jié)點(diǎn)
每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
注釋屬于注釋節(jié)點(diǎn)
節(jié)點(diǎn)與文檔內(nèi)容是一一對(duì)應(yīng)的關(guān)系翼闹，節(jié)點(diǎn)之間有層次關(guān)系斑鼻。
例如下面的html文檔：
<!DOCTYPE html>
<html>
<head>
<title>文檔標(biāo)題</title>
</head>
<body>
<a href="">我的鏈接</a>
<h1>我的標(biāo)題</h1>
</body>
</html>
會(huì)被建模為下面的文檔樹：
nodeType
元素.nodeType：只讀 屬性 當(dāng)前元素的節(jié)點(diǎn)類型
DOM節(jié)點(diǎn)的類型nodeType一種有12種，可以查看這里猎荠。
常用的節(jié)點(diǎn)類型包括：元素節(jié)點(diǎn)坚弱、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)：
元素節(jié)點(diǎn) ELEMENT_NODE：1
屬性節(jié)點(diǎn) ATTRIBUTE_NODE ：2
文本節(jié)點(diǎn) TEXT_NODE：3
<ul id="ul1" style="color: green">
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
oUl = document.getElementById('ul1');
alert(oUl.nodeType); // 彈出1
alert(oUl.childNodes[0].nodeType); //彈出3
alert(oUl.attributes[0].nodeType); //彈出2
alert(oUl.attributes[0].name); //彈出'id'
alert(oUl.attributes.length); //彈出2
alert(oUl.attributes[0].value); //彈出'ul1'
attributes
元素.attributes：只讀 屬性 屬性列表集合
具體代碼可以查看NodeType中js代碼中alert的部分关摇。
DOM節(jié)點(diǎn)
childNodes \ children
獲取第一級(jí)子元素
有兼容性問題（空白節(jié)點(diǎn)）荒叶，nodeType屬性
firstChild \ firstElementChild
獲取子元素里的第一個(gè)
lastChild \ lastElementChild
獲取子元素里的最后一個(gè)
childNodes
元素.childNodes：只讀屬性 子節(jié)點(diǎn)列表集合
childNodes至包含一級(jí)子節(jié)點(diǎn)，不包含后輩孫級(jí)以下的節(jié)點(diǎn)
childNodes的兼容性問題：
標(biāo)準(zhǔn)瀏覽器下：childNodes包含了文本和元素類型的節(jié)點(diǎn)输虱，并且也會(huì)包含非法嵌套的子節(jié)點(diǎn)些楣；
非標(biāo)準(zhǔn)瀏覽器下，至包含元素類型的節(jié)點(diǎn)宪睹，IE7及以下不包含非法嵌套的子節(jié)點(diǎn)
<ul id="ul1">
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
oUl = document.getElementById('ul1');
alert(oUl.childNodes.length); //在標(biāo)準(zhǔn)瀏覽器下彈出9愁茁；在IE6、7彈出4亭病。因?yàn)闃?biāo)準(zhǔn)瀏覽器下鹅很，文本元素（在這里是換行符）也包含在childNodes里面了。
for (var i=0; i<oUl.childNodes.length; i++){
oUl.childNodes[i].style.background = 'red'; //在標(biāo)準(zhǔn)瀏覽器下會(huì)報(bào)錯(cuò)罪帖，因?yàn)槲谋驹兀ㄟ@里是換行符）沒有是沒有style屬性的促煮。
}
//可以通過下面這種方式來解決：
for (var i=0; i<oUl.childNodes.length; i++){
if (oUl.childNodes[i].nodeType == 1) {
oUl.childNodes[i].style.background = 'red';
}
}
children
元素.children：只讀 屬性 子節(jié)點(diǎn)列表集合
標(biāo)準(zhǔn)下： 只包含元素類型的節(jié)點(diǎn)，并且包含非法嵌套的子節(jié)點(diǎn)
非標(biāo)準(zhǔn)下：只包含元素類型的節(jié)點(diǎn)整袁，IE7及以下不包含非法嵌套的子節(jié)點(diǎn)
這樣菠齿，如果把childNodes換為children的話，就不用進(jìn)行nodeType的判斷了坐昙。
for (var i=0; i<oUl.children.length; i++){
oUl.children[i].style.background = 'red';
}
子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的操作
firstChild
元素.firstChild：只讀 屬性 第一個(gè)子節(jié)點(diǎn)
標(biāo)準(zhǔn)下：firstChild會(huì)包含文本類型的節(jié)點(diǎn)
非標(biāo)準(zhǔn)下： 只包含元素節(jié)點(diǎn)
firstElementChild
元素.firstElementChild：只讀 屬性
標(biāo)準(zhǔn)下獲取第一個(gè)元素類型節(jié)點(diǎn)的子節(jié)點(diǎn)
非標(biāo)準(zhǔn)瀏覽器不支持
因此要進(jìn)行判斷：
if (oUl.firstElementChild){
oUl.firstElementChild.style.background = 'red';
} else {
oUl.firstChild.style.background = 'red';
}
//更為簡潔的寫法：
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';
lastChild绳匀、lastElementChild
元素.lastChild
元素.lastElementChild 最后一個(gè)子節(jié)點(diǎn)
原理與firstChild
firstElementChild相似，不再贅述
nextSibling、previousSibling
元素.nextSibling
元素.nextElementSibling 下一個(gè)兄弟節(jié)點(diǎn)
元素.previousSibling
元素.previousElementSibling 上一個(gè)兄弟節(jié)點(diǎn)
父節(jié)點(diǎn)
parentNode
<ul id="ul1">
<li>1111 <a href="javascript:;">隱藏</a></li>
<li>2222 <a href="javascript:;">隱藏</a></li>
<li>3333 <a href="javascript:;">隱藏</a></li>
<li>4444 <a href="javascript:;">隱藏</a></li>
</ul>
var oA = document.getElementsByTagName('a');
for (var i=0; i<oA.length; i++){
oA[i].onclick = function(){
this.parentNode.style.display = 'none';
}
}
元素.parentNode： 只讀 屬性 只有一個(gè) 當(dāng)前節(jié)點(diǎn)的父級(jí)節(jié)點(diǎn)
offsetParent
<head>
<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green;}
#div3 {background: orange;}
</style>
</head>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
var oDiv3 = document.getElementById('div3');
alert(oDiv3.parentNode.id); //彈出div2
alert(oDiv3.offsetParent.id); //彈出body1
上面的代碼襟士，如果給div1的style里面加上position: relative; 那么div3的offsetParent就變成了div1
元素.offsetParent：只讀 屬性 離當(dāng)前元素最近的一個(gè)有定位的父節(jié)點(diǎn)
如果沒有定位父級(jí)盗飒，默認(rèn)是body
操作元素屬性的多種方式
點(diǎn)的形式和中括號(hào)形式
通過.點(diǎn)的形式：oText.value
通過中括號(hào)[]的形式：oText[‘value’] （當(dāng)屬性名用變量來表示的時(shí)候，用中括號(hào)）
getAttribute陋桂、setAttribute、removeAttribute
元素.getAttribute(屬性名稱); 方法 獲取指定元素的指定屬性的值
元素.setAttribute(屬性名稱, 屬性值); 方法 給指定元素指定的屬性設(shè)置值
元素.removeAttribute(屬性名稱); 方法 移除指定的元素的指定的屬性
set/get與用點(diǎn).的區(qū)別：
用.和[]的形式無法操作元素的自定義屬性蝶溶；getAttribute可以操作元素的自定義屬性
用.和[]的形式來獲取src的時(shí)候嗜历，獲取的是一長串絕對(duì)路徑，但是在IE8以上以及標(biāo)準(zhǔn)瀏覽器中抖所，用getAttribute(‘src’)可以獲取到相對(duì)路徑（但是在IE7及以下梨州，獲取的src還是絕對(duì)路徑）
元素的創(chuàng)建操作
document.createElement();
document.createElement(標(biāo)簽名);
動(dòng)態(tài)創(chuàng)建元素
不會(huì)直接顯示在頁面當(dāng)中
前面必須是document，不能是其他
appendChild()
父級(jí).appendChild(要追加的元素)
方法
在指定父級(jí)子節(jié)點(diǎn)最后一個(gè)后面追加子元素
insertBefore()
父級(jí).insertBefore(新的元素田轧，指定的被插入的元素);
方法
在父級(jí)的指定子元素前面插入一個(gè)新元素
在IE下暴匠，如果第二個(gè)參數(shù)的節(jié)點(diǎn)不存在，會(huì)報(bào)錯(cuò)
在其它標(biāo)準(zhǔn)瀏覽器下傻粘，如果第二個(gè)參數(shù)的節(jié)點(diǎn)不存在每窖，則會(huì)以appendChild的方式進(jìn)行添加
為了兼容，應(yīng)做以下判斷：
<input type="text" id="text1" /><input type="button" value="留言" id="btn" />
<ul id="ul1"></ul>
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul1');
oBtn.onclick = function() {
var oLi = document.createElement('li');
oLi.innerHTML = oText.value;
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
var oA = document.createElement('a');
oA.innerHTML = '刪除';
oA.href = 'javascript:;';
oLi.appendChild( oA );
oA.onclick = function() {
// oUl.removeChild( this.parentNode );
this.parentNode.remove();
}
}
removeChild()
父級(jí).removeChild(要?jiǎng)h除的節(jié)點(diǎn));
或者 元素.remove();
replaceChild()
父級(jí).replaceChild(新節(jié)點(diǎn)弦悉、被替換節(jié)點(diǎn)) 替換子節(jié)點(diǎn)
appendChild窒典，insertBefore，replaceChild可以操作靜態(tài)節(jié)點(diǎn)稽莉，也可以操作動(dòng)態(tài)生成的節(jié)點(diǎn)瀑志。
表單操作
name
name：表單中可以通過name來獲取元素：父級(jí).name （該方法瀏覽器都兼容）
onchange事件
onchange事件：當(dāng)值發(fā)生改變的時(shí)候觸發(fā)
text：當(dāng)光標(biāo)離開的時(shí)候，如果內(nèi)容有變化污秆，就觸發(fā)
radio/checkbox：
標(biāo)準(zhǔn)下點(diǎn)擊的時(shí)候劈猪，只要值發(fā)生改變，就會(huì)觸發(fā)良拼；
非標(biāo)準(zhǔn)下战得，焦點(diǎn)離開的時(shí)候，如果值發(fā)生改變就觸發(fā)
select：一選擇不同的項(xiàng)将饺，就觸發(fā)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form1">
<input type="text" name="text1" />
<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女
<input type="checkbox" name="a" value="html" checked />html
<input type="checkbox" name="a" value="css" />css
<input type="checkbox" name="a" value="javascript" />javascript
<select name="city">
<option value="">請(qǐng)選擇城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
<input type="button" value="按鈕" name="btn" />
</form>
<script>
var oForm = document.getElementById('form1');
oForm.text1.onchange = function(){
alert(this.value); //注意贡避，文本輸入框onchange的觸發(fā)，是在輸入完畢之后予弧，鼠標(biāo)離開該文本框之后觸發(fā)
}
oForm.sex[0].onchange = function(){
// alert(1);
// alert(this.value);
} //注意：oForm.sex其實(shí)是一個(gè)元素集合刮吧，因?yàn)閚ame為sex的單選按鈕有兩個(gè)
oForm.a[0].onchange = function(){
alert(2);
}
// alert(oForm.city.value);
oForm.city.onchange = function(){
alert(this.value);
}
oForm.btn.onclick = function(){
//radio, checkbox 判斷當(dāng)前的選項(xiàng)是否被選中
//alert(oForm.sex[0].checked);
for(var i=0; i<oFrom.sex.length; i++){
if(oForm.sex[i].checked){
alert(oForm.sex[i].value + '被選中了');
} else {
alert(oForm.sex[i].value + '未被選中');
}
}
for(var i=0; i<oFrom.a.length; i++){
if(oForm.a[i].checked){
alert(oForm.a[i].value + '被選中了');
} else {
alert(oForm.a[i].value + '未被選中');
}
}
}
</script>
</body>
</html>
表格操作
<table width="100%" id="tab1" border="1px">
<tr>
<td>1</td>
<td>leo</td>
<td>男</td>
<td><a href="javascript:;">刪除</a></td>
</tr>
<tr>
<td>1</td>
<td>小美</td>
<td>女</td>
<td><a href="javascript:;">刪除</a></td>
</tr></table>
var oTab = document.getElementById('tab1');
alert(oTab.children[1].children[1].innerHTML); //什么也彈不出來，提示顯示oTab.children[1]未定義掖蛤，這是因?yàn)槿绻趖able中沒有添加tbody的話杀捻，瀏覽器會(huì)自動(dòng)隱形添加一個(gè)tbody出來。因此蚓庭，寫表格結(jié)構(gòu)時(shí)致讥，最好添加上tbody仅仆。
正確的做法
<table width="100%" id="tab1" border="1px">
<thead>
<tr>
<th>編號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>leo</td>
<td>男</td>
<td><a href="javascript:;">刪除</a></td>
</tr>
<tr>
<td>1</td>
<td>小美</td>
<td>女</td>
<td><a href="javascript:;">刪除</a></td>
</tr>
</tbody>
</table>
var oTab = document.getElementById('tab1');
// alert(oTab.children[0].children[1].children[1].innerHTML); //這是就可以彈出“小美”
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML); //彈出小美，更為直觀
表格屬性
tHead：表格頭（DOM中規(guī)定thead只能有一個(gè)）
tBodies：表格正文（DOM中規(guī)定tbody可以有多個(gè)）
tFoot：表格尾（DOM中規(guī)定tfoot只能有一個(gè)）
rows：行
cells：列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="100%" id="tab1" border="1px">
<thead>
<tr>
<th>編號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var data = [
{id: 1, username: 'leo', sex: '男'},
{id: 2, username: '小美', sex: '女'},
{id: 3, username: '王亮', sex: '男'},
{id: 4, username: 'zhangsan', sex: '男'}
];
var oTab = document.getElementById('tab1');
var oTbody = oTab.tBodies[0];
for(var i=0; i<data.length; i++){ //表格的創(chuàng)建
var oTr = document.createElement('tr');
if(i%2 == 0){ //各行變色
oTr.style.background = 'white';
} else {
oTr.style.background = 'gray';
}
var oTd = document.createElement('td');
oTd.innerHTML = data[i].id;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTd.innerHTML = data[i].username;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTd.innerHTML = data[i].sex;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTr.appendChild(oTd);
var oA = document.createElement('a');
oA.innerHTML = '刪除';
oA.href = 'javascript:;';
oA.onclick = function(){
oTbody.removeChild(this.parentNode.parentNode);
for(var i=0; i<oTbody.rows.length; i++){
if(i%2 == 0) {
oTbody.rows[i].style.background = 'white';
} else {
oTbody.rows[i].style.background = 'gray';
}
}
}
oTd.appendChild(oA);
oTbody.appendChild(oTr);
}
</script>
</body>
</html>
購物車練習(xí)
<!DOCTYPE html>
<html>
<head>
<title>購物車</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script type="text/javascript">
</script>
<script type="text/javascript">
/*定義事件時(shí),若傳入this,它是本次觸發(fā)事件的對(duì)象*/
//調(diào)用該函數(shù)時(shí)傳入了this,它就是正在單擊的按鈕對(duì)象,需要聲明參數(shù)
//來接收此對(duì)象.即obj=this=正在點(diǎn)的按鈕.
var map = new Map();
function add_shoppingcart(btn){
//獲取btn所在的行垢袱。
var tr = btn.parentNode.parentNode;
//獲取btn下的所有列
var tds = tr.children;
//獲取商品名稱
var name = tds[0].innerHTML;
//獲取商品價(jià)格
var price = parseInt(tds[1].innerHTML);
console.log(name+":"+price);
if(map.has(name))
{
var tr = map.get(name);
var addbtn = tr.getElementsByTagName('input')[2];
increase(addbtn);
}
else
{
//創(chuàng)建一個(gè)新的行
var ntr = document.createElement("tr");
ntr.innerHTML =
`
<tr>
<td>${name}</td>
<td>${price}</td>
<td align="center">
<input type="button" value="-" onclick="decrease(this)"/>
<input type="text" size="3" readonly value="1"/>
<input type="button" value="+" onclick="increase(this)"/>
</td>
<td>${price}</td>
<td align="center"><input type="button" value="x" onclick="del(this)"/></td>
</tr>`;
map.set(name,ntr);
//將此行添加到購物車列表的tbody下.
var tbody = document.getElementById("goods");
tbody.appendChild(ntr);
//求和
sum();
}
}
function del(btn){
// var btn = this;
//獲取btn所在的行
var tr = btn.parentNode.parentNode;
tr.remove();
//求和
sum();
}
function increase(btn){
// var btn = this;
//獲取按鈕的前一個(gè)元素
var td1 = btn.previousElementSibling;
// console.log(td1);
var amount = parseInt(td1.value);
//設(shè)置td1的值
td1.value = ++amount;
//獲取商品的單價(jià)
//獲取btn所在的行
var tr = btn.parentNode.parentNode;
//獲取商品單價(jià)
var price = parseInt(tr.children[1].innerHTML);
// console.log(price);
//獲取btn的下一個(gè)元素(商品價(jià)格)
var td2 = btn.parentNode.nextElementSibling;
//設(shè)置商品的總價(jià)
td2.innerHTML = amount*price;
sum();
}
function decrease(btn){
// var btn = this;
//獲取按鈕的后一個(gè)元素
var td1 = btn.nextElementSibling;
// console.log(td1);
var amount = parseInt(td1.value);
//設(shè)置td1的值
//當(dāng)amount<=1時(shí)返回
if(amount<=1){
return;
}
td1.value = --amount;
//獲取商品的單價(jià)
//獲取btn所在的行
var tr = btn.parentNode.parentNode;
//獲取商品單價(jià)
var price = parseInt(tr.children[1].innerHTML);
// console.log(price);
//獲取btn的下一個(gè)元素(商品價(jià)格)
var td2 = btn.parentNode.nextElementSibling;
//設(shè)置商品的總價(jià)
td2.innerHTML = amount*price;
sum();
}
/*計(jì)算合計(jì),該方法在以下四處被調(diào)用:
* 加入購物車,刪除,增加,減少.(之后)
* 每次計(jì)算時(shí)無條件獲取所有的數(shù)據(jù)行,并求和,因此沒有參數(shù).*/
function sum(){
//獲取購物車tbody中的所有行
var tbody = document.getElementById("goods");
var trs = tbody.children;
var total = 0 ;
for(var i = 0 ; i < trs.length ; i++){
//獲取每一行的總價(jià)
var money = parseInt(trs[i].children[3].innerHTML);
total += money;
}
//設(shè)置總價(jià)
//獲取總價(jià)所在的td
var sum = document.getElementById("total");
//設(shè)置總價(jià)
sum.innerHTML = total;
}
</script>
</head>
<body>
<h1>真劃算</h1>
<table>
<tr>
<th>商品</th>
<th>單價(jià)(元)</th>
<th>顏色</th>
<th>庫存</th>
<th>好評(píng)率</th>
<th>操作</th>
</tr>
<tr>
<td>羅技M185鼠標(biāo)</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this)"/>
</td>
</tr>
<tr>
<td>微軟X470鍵盤</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手機(jī)殼</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>藍(lán)牙耳機(jī)</td>
<td>100</td>
<td>藍(lán)色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士頓U盤</td>
<td>70</td>
<td>紅色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>購物車</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>單價(jià)(元)</th>
<th>數(shù)量</th>
<th>金額(元)</th>
<th>刪除</th>
</tr>
</thead>
<tbody id="goods">
<!--<tr>
<td>羅技M185鼠標(biāo)</td>
<td>80</td>
<td align="center">
<input type="button" value="-" onclick="decrease(this)"/>
<input type="text" size="3" readonly value="1"/>
<input type="button" value="+" onclick="increase(this)"/>
</td>
<td>80</td>
<td align="center"><input type="button" value="x" onclick="del(this)"/></td>
</tr>
--></tbody>
<tfoot>
<tr>
<td colspan="3" align="right">總計(jì)</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
