DOM · TUNA-daily

## 1. DOM ### 1.1. DOM簡介 > 1. DOM是Document Object Model的縮寫，即文檔對象模型。 > 2. DOM描繪了一個層次化的樹，允許開發人員添加、刪除、修改頁面的某一部分。 > 3. 瀏覽器在解析HTML頁面標記的時候，其實不是按照一行一行讀取并解析的，而是將HTML頁面中的每一個標記按照順序在內存中組建一顆DOM樹，組建好之后，按照樹的結構將頁面顯示在瀏覽器的窗口中。 ### 1.2 節點層次 HTML網頁是可以看做是一個樹狀的結構，如下： ~~~ html |-- head | |-- title | |-- meta | ... |-- body | |-- div | |-- form | | |-- input | | |-- textarea ... ... ... ~~~ 這是一顆DOM樹，是由多個節點（Node）組成的，節點的類型有很多種。節點最多有一個父節點，可以有多個子節點。 **HTML DOM 定義了訪問和操作HTML文檔的標準方法。** 1. document 代表當前頁面的整個文檔樹。 2. 使用document訪問屬性 all forms images links 訪問方法(最常用的DOM方法) ~~~ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> var dom = window.document;// 獲取dom 樹, 獲取document 對象. function testAll() { var allArr = dom.all; // all 獲取頁面中所有的標簽節點 alert(allArr.length); for (var i = 0; i < allArr.length; i++) { alert(allArr[i].nodeName); // .nodeName獲取節點名稱 } } // anchors 獲取頁面中的所有的錨連接. function testAnchors() { var anArr = dom.anchors; alert(anArr.length); } // froms 獲取所有的form 表單對象 function testForms() { var formArr = dom.forms; alert(formArr.length); alert(formArr[0].nodeName); } // images function testImages() { var imageArr = dom.images; alert(imageArr.length); } // links 獲取頁面的超鏈接. function testLinks() { var linkArr = dom.links; //alert(linkArr.length); for (var i = 0; i < linkArr.length; i++) { //alert(linkArr[i].nodeName); } for (var i in linkArr) { alert(i); } } //testLinks(); // 獲取頁面的Body var body = dom.body; alert(body.nodeName); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body onmousemove="test(this)"> <img src="xxx" alt="這是一個美女"/> <img src="xxx" alt="這是一個美女"/> <img src="xxx" alt="這是一個美女"/> <a href="http://www.baidu.com">百度一下</a> <a href="http://www.google.com">百度兩下</a> <a href="http://www.baigu.com">百谷一下</a> <a name="one"></a> <a name="two"></a> <form> <label>姓名:</label> <input type="text"/> </form> </body> </html> ~~~ 2.3. 獲取節點對象案例 document.getElementById("html元素的id") document.getElementsByTagName("標簽名") document.getElementsByName("html元素的name") 示例： 1，得到所有的div元素并顯示信息（innerHTML）。 2，得到所有div元素中id為"test"的結果。 Var dom = window.document; function testByTagName() { var iptArr = dom.getElementsByTagName("input"); for (var i = 0; i < iptArr.length; i++) { alert(iptArr[i].value); } } // window 對象提供了一個事件, onload 事件 onload(頁面加載完畢執行該代碼) 是一個事件, 給事件一個方法, //window.onload = testByTagName; //2，得到所有標簽id為"username"的結果。獲取舊value值并設置value值 function testById() { var user = dom.getElementById("username"); alert(user.value); user.value = "rose"; } //testById(); //3. 獲取所有標簽name 為like的元素.獲取value值. function testByName() { var likeArr = dom.getElementsByName("like"); for (var i = 0; i < likeArr.length; i++) { alert(likeArr[i].value); } } testByName(); 2.3.1. 案例顯示頁面任意一個節點對象的所有子節點的nodeName、nodeType、nodeValue 2.3.2. 屬性操作練習 1，寫一個form，其中有多個checkbox。 2，獲取所有選中的數量。 3，實現全選與全不選的效果。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script type="text/javascript"> function getSum() { /* 需求：通過點擊總金額按鈕獲取被選中的條目的金額的總和，并將總金額顯示在按鈕右邊。思路： 1，先獲取所有的checkbox對象。 2，對這些對象進行遍歷。判斷哪個對象被選中。 3，對被選中對象的金額進行累加。 4，顯示在按鈕右邊。 */ var items = document.getElementsByName("item"); var sum = 0; for(var x=0; x<items.length; x++) { if(items[x].checked) { sum += parseInt(items[x].value); } } var str = sum+"元"; document.getElementById("sumid").innerHTML = str.fontcolor('red'); } function checkAll(node) { /* 需求：通過全選checkbox，將其他條目都選中。思路：只要將全選checkbox的checked狀態賦值給其他的item checked狀態即可。 */ //var allNode = document.getElementsByName("all")[index]; var items = document.getElementsByName("item"); for(var x=0; x<items.length; x++) { items[x].checked = node.checked; } } </script> </head> <body> <div>商品列表</div> <input type="checkbox" name="all" onclick="checkAll(this)" /> 全選<br /> <input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br /> <input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br /> <input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br /> <input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br /> <input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br /> <input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br /> <input type="checkbox" name="all" onclick="checkAll(this)" /> 全選<br /> <input type="button" value="總金額：" onclick="getSum()" /><span id="sumid"></span> </body> </html> 2.4. 通過節點關系查找節點從一個節點出發開始查找： parentNode 獲取當前元素的父節點。 childNodes 獲取當前元素的所有下一級子元素。 firstChild 獲取當前節點的第一個子節點。 lastChild 獲取當前節點的最后一個子節點。 nextSibling 獲取當前節點的下一個節點。（兄節點） previousSibling 獲取當前節點的上一個節點。（弟節點）示例1： firstChild屬性最普遍的用法是訪問某個元素的文本： var text=x.firstChild.nodeValue; 示例2： parentNode 屬性常被用來改變文檔的結構。假設您希望從文檔中刪除帶有 id 為 "maindiv" 的節點： var x=document.getElementById("maindiv"); x.parentNode.removeChild(x); 2.4.1. 獲取節點對象的信息每個節點都包含的信息的，這些屬性是： nodeType 節點類型 nodeName 節點名稱 nodeValue 節點值 nodeType nodeType 屬性可返回節點的類型。 --------------------------------- 元素類型節點類型 ------------------ 元素 1 就是標簽元素，例<div>..</div> 文本 3 標簽元素中的文本注釋 8 表示為注釋 nodeName nodeName 屬性含有某個節點的名稱。 -------------------------------- 元素節點的 nodeName 是標簽名稱屬性節點的 nodeName 是屬性名稱文本節點的 nodeName 永遠是 #text 文檔節點的 nodeName 永遠是 #document nodeValue 對于文本節點，nodeValue 屬性是所包含的文本。對于屬性節點，nodeValue 屬性是屬性值。對于注釋節點，nodeValue 屬性注釋內容。 nodeValue 屬性對于文檔節點和元素節點是不可用的。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> //節點和節點之間的關系. //獲取dom樹 var dom = window.document; //獲取指定id 的標簽節點. function test() { var form = dom.getElementById("form1"); //獲取父節點. //alert(form.parentNode.nodeName); // 獲取子節點(Node 包含文本,注釋,標簽) var childArr = form.childNodes; //alert(childArr.length); /* for (var i = 0; i < childArr.length; i++) { alert(childArr[i]); } */ // 獲取第一個孩子. var first = form.firstChild; //alert(first); //最后一個孩子. var last = form.lastChild; //alert(last); // 獲取下兄弟(獲取弟弟) var sibling = form.nextSibling; //alert(sibling.nodeName); // 獲取大哥 var previous = form.previousSibling; alert(previous.nodeName); } test(); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body onmousemove="test(this)"> <a>哈哈</a> <form id="form1"> <label>姓名:</label> <input type="text" /> </form> </body> </html> 2.5. 節點操作 2.5.1. 創建新節點 document.createElement("標簽名") 創建新元素節點 elt.setAttribute("屬性名", "屬性值") 設置屬性 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> ///創建一個文本輸入框. // 獲取dom 樹. var dom = window.document; // 獲取body 節點. var body = dom.body; // 創建標簽節點 ,注意: 節點創建成功,需要掛載在DOM 樹中, 指定父節點. function testCreateElement() { // 創建了一個input 節點. var ipt = dom.createElement("input"); //alert(ipt); // 指定節點存放的位置. 指定父節點.掛載在父節點下(認爹) ipt.setAttribute("id", "username"); // 父節點掛載子節點. body.appendChild(ipt); } // 創建文本? 文本節點 function testCreateTextNode() { var text = dom.createTextNode("姓名:"); //掛載該節點. 該方法默認尾部追加 body.appendChild(text); } // 創建標簽節點,是一個按鈕 function testCreateButton() { var ipt = dom.createElement("input"); // 設置節點的屬性. ipt.setAttribute("type", "button"); ipt.setAttribute("value", "按鈕"); //掛載節點 //body.appendChild(ipt); // 指定位置的. // 獲取位置. var user = dom.getElementById("username"); // 參數一: 需要添加的新節點, 參數二:指定位置.先元素會添加到在改位置之前 body.insertBefore(ipt, user); //按鈕添加事件. 節點對象.事件名的形式添加事件 ipt.onclick = test; ipt.re } function test() { // 刪除節點. this.parentNode.removeChild(this); } testCreateTextNode(); testCreateElement(); testCreateButton(); test(); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body onmousemove="test(this)"> </body> </html> 2.5.2. 把新節點放到指定位置 elt.appendChild(e) 添加元素到elt中最后的位置 elt.insertBefore(new, child); 添加到elt中，child之前。 // 參數1：要插入的節點參數2：插入目標元素的位置 2.5.3. 移除某個節點 elt.removeChild(eChild) 刪除指定的子節點示例： var by = document.forms[0] var ip = document.createElement("input"); document.createTextNode() ; ip.setAttribute("type","file"); by.appendChild(ip); <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>發布一個二手汽車消失</title> </head> <body> <table> <tr> <td> <input type="file" /> </td> <td> <a href="#" onclick="delFile(this)" >刪除附件</a>  </td> </tr> <tr> <td colspan="2"> <input id="b1" type="button" value="添加附件" onclick="addFile()" /> </td> </tr> </table> </body> <script> function delFile(aNode){ var tbody = document.getElementsByTagName("tbody")[0]; // aNode 是一個a標簽， a的父節點td tr var tr = aNode.parentNode.parentNode; tbody.removeChild(tr); } function addFile(){ var tbody = document.getElementsByTagName("tbody")[0]; //創建節點 var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var button = document.getElementById("b1"); td1.innerHTML = "<input type='file' name='image'/>"; td2.innerHTML = "<a href='#' onclick='delFile(this)' >刪除附件</a>"; tr.appendChild(td1); tr.appendChild(td2); tbody.insertBefore(tr,button.parentNode.parentNode); } </script> </html> 2.5.4. 案例 1. 生成二級城市聯動菜單 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> select{ width:100px; } </style> <script type="text/javascript"> function selcity() { //定義數據對應關系 //城市有很多，所以通過數組存儲。每一個省對應一個城市數組，怎么建立對應關系呢？ //每一個省都有自己的角標。通過角標和數組建立對應關系，這就是二維數組。 var arr = [['--選擇城市--'],['海淀區','朝陽區','東城區','西城區'] ,['沈陽','大連','鞍山','撫順'] ,['濟南','青島','煙臺','威海'] ,['石家莊','廊坊','唐山','秦皇島']]; //獲取選擇的省的角標。 var selNode = document.getElementById("selid"); var index = selNode.selectedIndex; var cities = arr[index]; var subSelNode = document.getElementById("subselid"); //有更簡單清除方式，只要改變下拉菜單的長度即可。 subSelNode.options.length = 0; /* //清除上一次選擇的子菜單內容。 for(var x=1; x<subSelNode.options.length;) { alert(subSelNode.options.length+"..."+subSelNode.options[x].innerHTML+"..."+x); subSelNode.removeChild(subSelNode.options[x]); } */ for(var x=0; x<cities.length; x++) { var optNode = document.createElement("option"); optNode.innerHTML = cities[x]; subselid.appendChild(optNode); } } </script> </head> <body> <select id="selid" onchange="selcity()"> <option>--選擇省市--</option> <option>北京市</option> <option>遼寧省</option> <option>山東省</option> <option>河北省</option> </select> <select id="subselid"> <option>--選擇城市--</option> </select> </body> </html> 2.動態生成年、月、日字段 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> /** * @author Administrator */ //通過js創建年,月,日 //獲取Dom var dom = window.document; function myYear() { //獲取年的select var year = dom.getElementById("year"); //創建年 var minYear = 1900; var maxYear = new Date().getFullYear(); for (var i = minYear; i <= maxYear; i++) { //創建Option var opt = dom.createElement("option"); //設置Option,標簽體. opt.innerHTML = i; opt.value = i; //掛載節點 year.appendChild(opt); } } function myMonth() { var month = dom.getElementById("month"); //創建月 for (var i = 1; i <= 12; i++) { //創建Option var opt = dom.createElement("option"); //設置Option,標簽體. if (i < 10) { opt.innerHTML = "0" + i; opt.value = i; } else { opt.innerHTML = i; opt.value = i; } month.appendChild(opt); } month.onchange = myDay; } function myDay() { clear(); //創建天 // 大月1 3 5 7 8 10 12 ,小月4 6 9 11 閏年2月非閏年的2月 //獲取年 var year = dom.getElementById("year").value; //獲取月 var month = dom.getElementById("month").value; if (year == "") { alert("請選擇年"); return; } if (month == "") { alert("請選擇月"); return; } //獲取天select var day = dom.getElementById("day"); //一個月至少有28天. for (var i = 1; i <= 28; i++) { var opt = dom.createElement("option"); if (i < 10) { opt.innerHTML = "0" + i; opt.value = "0" + i; } else { opt.innerHTML = i; opt.value = i; } day.appendChild(opt); } //大月 var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12; //小月 var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11; //閏年可以整除4但不能整除100 或者年份可以整除400. var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0; //判斷,如果是大月,添加3天 if (isBigMonth) { //添加3天 for (var i = 29; i <= 31; i++) { var opt = dom.createElement("option"); opt.innerHTML = i; opt.value = i; day.appendChild(opt); } } else if (isSmallMonth) { //添加2天 for (var i = 29; i <= 30; i++) { var opt = dom.createElement("option"); opt.innerHTML = i; opt.value = i; day.appendChild(opt); } } else if (isLeapYear) { //如果是閏年,添加一天.專門處理閏年2月. var opt = dom.createElement("option"); opt.innerHTML = 29; opt.value = 29; day.appendChild(opt); } } function clear() { var day = dom.getElementById("day"); var optArr = day.childNodes; for (var i = optArr.length - 1; i >= 0; i--) { day.removeChild(optArr[i]); } } function getBirthday() { //獲取Dom var dom = window.document; myYear(); myMonth(); } getBirthday(); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> 生日: <select id="year"> <option>年</option> </select> <select id="month"> <option>月</option> </select> <select id="day"> <option>日</option> </select> </body> </html> 3. 生產一個驗證碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> /** * @author Administrator */ //驗證碼 ,4位的,由字符,數字組成. function createCode() { var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; //隨機的從數組中取出4個元素. var mess = ""; var index = 0; for (var i = 0; i < 4; i++) { //生成隨機數.而且是在數組的長度范圍內. //0-9之間的隨機數. Math.floor(Math.random()*10) //0到數組長度(不包含)之間的浮點數.,向下取整, var index = Math.floor(Math.random() * datas.length); mess += datas[index]; }; // var codeSpan = window.document.getElementById("codeSpan"); codeSpan.style.color = "red"; codeSpan.style.fontSize = "20px"; codeSpan.style.background = "gray"; codeSpan.style.fontWeight = "900"; codeSpan.style.fontStyle = "italic"; codeSpan.style.textDecoration = "line-through"; codeSpan.innerHTML = mess; codeSpan.value = mess; } createCode(); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <span id="codeSpan"></span><a href="#" onclick="createCode()">看不清楚</a> </body> </html> 2，實現增刪改查表格的增刪改查。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> var dom = window.document; function getUserData() { //獲取id var uid = dom.getElementById("uid").value; var username = dom.getElementById("username").value; var pwd = dom.getElementById("pwd").value; var age = dom.getElementById("age").value; var city = dom.getElementById("city").value; //創建一個對象.封裝用戶的信息 //創建對象 var p1 = new Object(); //成員 p1.uid = uid; p1.username = username; p1.pwd = pwd; p1.age = age; p1.city = city; //函數 p1.toString = function() { alert("對象的toString方法"); alert(p1.uid + ":" + p1.username + ":" + p1.pwd + ":" + p1.age + ":" + p1.city); } //執行對象的功能. //p1.toString(); return p1; } function createUser() { //獲取用戶錄入的信息. var person = getUserData(); //將用戶的信息顯示在表單中. //創建用戶 //創建TR var dom = window.document; var tr1 = dom.createElement("tr"); //創建TD 7個 var td1 = dom.createElement("td"); var td2 = dom.createElement("td"); var td3 = dom.createElement("td"); var td4 = dom.createElement("td"); var td5 = dom.createElement("td"); var td6 = dom.createElement("td"); var td7 = dom.createElement("td"); //TD中添加用戶的信息. //td1 中需要添加一個復選框 //1.創建復選框. var select = dom.createElement("input"); //設置屬性,變為復選框 select.setAttribute("type", "checkbox"); select.setAttribute("name", "select"); //掛載節點. td1.appendChild(select); td2.appendChild(dom.createTextNode(person.uid)); td3.appendChild(dom.createTextNode(person.username)); td4.appendChild(dom.createTextNode(person.pwd)); td5.appendChild(dom.createTextNode(person.age)); td6.appendChild(dom.createTextNode(person.city)); //td7 的內容是一個按鈕. //創建按鈕 var but = dom.createElement("input"); but.setAttribute("type", "button"); but.setAttribute("value", "刪除"); //注冊事件(單擊事件) but.onclick = myDelete; //掛載節點. td7.appendChild(but); //將td掛載到tr中 tr1.appendChild(td1); tr1.appendChild(td2); tr1.appendChild(td3); tr1.appendChild(td4); tr1.appendChild(td5); tr1.appendChild(td6); tr1.appendChild(td7); //將tr掛載到tbody中 //獲取table // var tb1 = dom.getElementById("tb1"); // tb1.appendChild(tr1); //獲取tbody var tbody1 = dom.getElementsByTagName("tbody")[0]; tbody1.appendChild(tr1); } function checkUserData() { return false; } function addUser() { //獲取用戶信息 var person = getUserData(); //檢測用戶數據有效性 if (checkUserData()) { //創建用戶 createUser(person); } } //全部選中的功能. function mySelectAll() { //獲取復選框. var selectAll = dom.getElementById("selectAll"); //獲取程序創建的復選框 var selectArr = dom.getElementsByName("select"); if (selectAll.checked) { for (var i = 0; i < selectArr.length; i++) { selectArr[i].checked = true; } } else { for (var i = 0; i < selectArr.length; i++) { selectArr[i].checked = false; } } } //全部刪除功能 function myDeleteAll() { //獲取復選框. var selectAll = dom.getElementById("selectAll"); //獲取程序創建的復選框 var selectArr = dom.getElementsByName("select"); if (selectAll.checked) { for (var i = selectArr.length - 1; i >= 0; i--) { var select = selectArr[i]; //刪除復選框所在的tr //復選框的父節點(td)->父節點(tr)(刪除該節點)->tbody if (select.checked) { select.parentNode.parentNode.parentNode.removeChild(select.parentNode.parentNode); } } } } //刪除一行一個tr function myDelete() { //this表示當前對象. this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body>  <form> <table border="1px" align="center" width="50%" cellspacing="0px" cellpadding="3px" id="tb1"> <tr> <td>選擇</td><td>編號</td><td>姓名</td><td>密碼</td><td>年齡</td><td>住址</td><td>操作</td> </tr> <tr> <td> <input type="checkbox" id="selectAll" onclick="mySelectAll()"/> </td> <td colspan="6"> <input type="button" value="全部刪除" onclick="myDeleteAll()"/> </td> </tr> </table> </form> <hr/> <form> <table border="1px" align="center" width="50%" cellspacing="0px" cellpadding="3px"> <tr> <td>編號</td><td> <input type="text" name="uid" id="uid"/> </td> </tr> <tr> <td>姓名:</td><td> <input type="text" name="username" id="username"/> </td> </tr> <tr> <td>密碼</td> <td> <input type="password" name="pwd" id="pwd"/> </td> </tr> <br /> <tr> <td>年齡</td><td> <input type="text" name="age" id="age"/> </td> </tr> <tr> <td>住址:</td><td> <select name="city" id="city"> <option value="">請選擇</option> <option value="gz">廣州</option> <option value="bj">北京</option> <option value="sh">上海</option> </select></td> </tr> <tr align="center"> <td colspan="2"> <input type="button" value="提交" onclick="addUser()"/> <input type="reset" value="重置"/> </td> </table> </form> </body> </html>