Table Javasc DOM操作（2） 具體執行個體應用，javascdom
最近在做一個動態產生所需輸入條件的業務，在網上找相關的可以應用到這上面的內容，最後採用了網上大牛的Table DOM 操作。
：
具體代碼如下：(再次感謝大牛)
<!doctype html><!--JS DOM TABLE 操作 原創QQ:42149485--><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body,input,tr,td,select{font-size:12px; font-family:tahoma;}#TB {width:980px; background:#3c3c3c; }#TB .TT {height:30px; background:#616161;}#TB .TT:hover {height:30px; background:#616161;}#TB .TT td {color:#FFF;font-weight:bold; text-align:center;}#TB tr {height:30px; background:#eaeaea;}#TB tr:hover {height:30px; background:#fadada;}#TB tr td {text-align:center; color:#000;}.select {width:99%; height:28px;}</style><script type="text/javascript">//Create TRvar nName = new Array("Tony","Mika","Neo","Oi","Kim","Park","Mr Lee","Tasky","Saco","Novel");var nSex = new Array("男性","女性","保密");var i = 1;function CreateTB(){var oTB = document.getElementById("TB");var oTR = oTB.insertRow(oTB.rows.length);var oTD1 = oTR.insertCell(0);oTD1.innerHTML = "<input type='checkbox' name='ck'>";var oTD2 = oTR.insertCell(1);oTD2.innerHTML = "<div>" + nName[parseInt(Math.random()*10)] + "</div><center><input type='text' style='display:none; width:99%; height:22px; text-align:center;'></center>";var oTD3 = oTR.insertCell(2);oTD3.innerHTML = "<div>" + parseInt(Math.random()*50+15) + "</div><center><select name='age' class='select' style='display:none;'></select></center>";var oTD4 = oTR.insertCell(3);oTD4.innerHTML = "<div>" + nSex[parseInt(Math.random()*3)] + "</div><center><select name='sex' class='select' style='display:none;'></select></center>";var oTD5 = oTR.insertCell(4);oTD5.innerHTML = "<input type='button' value='修改' onclick=\"edit(this,'show')\"><input type='button' value='刪除' onclick='del(this)'>";i++;}//EDIT TRfunction edit(o,otype){var oTR=o.parentNode.parentNode;var oDiv1=oTR.cells[1].getElementsByTagName("div");var oDiv2=oTR.cells[2].getElementsByTagName("div");var oDiv3=oTR.cells[3].getElementsByTagName("div");var oInpt1=oTR.cells[1].getElementsByTagName("input");var oselect2=oTR.cells[2].getElementsByTagName("select");var oselect3=oTR.cells[3].getElementsByTagName("select");if (otype =="show"){o.value="確認";o.setAttribute("onclick","edit(this,'hide')");//名字修改前oInpt1[0].value = oDiv1[0].childNodes[0].nodeValue;oInpt1[0].style.display = "block";oDiv1[0].style.display = "none";//年齡修改前oDiv2[0].style.display = "none";var iSage = parseInt(oDiv2[0].childNodes[0].nodeValue);oselect2[0].style.display = "block";if (oselect2[0].length == 0){for (var i=0; i<50; i++){oselect2[0].options.add(new Option(i+15,i+15)); }oselect2[0].options[iSage-15].selected = true;}//性別修改前oDiv3[0].style.display = "none";oselect3[0].style.display = "block";if (oselect3[0].length == 0){for (var i=0; i<nSex.length; i++){oselect3[0].add(new Option(nSex[i],i));}switch (oDiv3[0].childNodes[0].nodeValue){case '男性':var iSno = 0;break;case '女性':var iSno = 1;break;case '保密':var iSno = 2;break;}oselect3[0].options[iSno].selected = true;}}else if (otype =="hide"){o.value="修改";o.setAttribute("onclick","edit(this,'show')");//名字修改後oDiv1[0].childNodes[0].nodeValue = oInpt1[0].value;oDiv1[0].style.display = "block";oInpt1[0].style.display = "none";//年齡修改後oDiv2[0].childNodes[0].nodeValue = oselect2[0].value;oDiv2[0].style.display = "block";oselect2[0].style.display = "none";//性別修改後oDiv3[0].childNodes[0].nodeValue = nSex[oselect3[0].value];oDiv3[0].style.display = "block";oselect3[0].style.display = "none";}}//Delete TRfunction del(o){var oTB = document.getElementById("TB");var oInpt = oTB.getElementsByTagName("input");if (o == 'chk'){for (var i=1; i<oInpt.length ; i++){if (oInpt[i].type == 'checkbox' && oInpt[i].checked){var oRow = oInpt[i].parentNode.parentNode.sectionRowIndex;oTB.deleteRow(oRow);i--;}}}else{var oDel = o.parentNode.parentNode.sectionRowIndex;oTB.deleteRow(oDel);}}//Check Allfunction chk(type,o){var oInpt = document.getElementsByTagName("input");for (var i=0; i<oInpt.length; i++){if (oInpt[i].type == "checkbox"){oInpt[i].checked = o.checked;}}}//Check Fanfunction chkFun(){var oTB = document.getElementById("TB");var oInpt = oTB.getElementsByTagName("input");for (var i=1; i<oInpt.length; i++){if (oInpt[i].type == "checkbox"){if (oInpt[i].checked){oInpt[i].checked = false;}else{oInpt[i].checked = true;}}}}</script></head><body><table width="980" align="center" border="0" cellpadding="0" cellspacing="0"><tr height="30"><td><input type="button" onclick="CreateTB()" value="建立" /><input type="button" onclick="chkFun()" value="反選" /><input type="button" onclick="del('chk')" value="選擇刪除" /></td></tr></table><table id="TB" align="center" border="0" cellpadding="0" cellspacing="1"><tr class="TT"><td width="50"><input type="checkbox" onclick="chk('all',this)" /></td><td width="">姓名</td><td width="50">年齡</td><td width="70">性別</td><td width="100">操作</td></tr></table></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
