我們在實際開發中經常會想要實現如下情況：
點擊某個按鈕，然后動態的網頁面里面添加一個表格或者一行，這個更加靈活方便。但是實現起來肯定不能像在頁面里面直接寫標簽來的容易，以下是我項目中的代碼，拿過來分享：
<html> <head> <script type="text/javascript"> var i = 0; function deleteTable(myNode) { i --; document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode); } function createImageTable() { i++; if(i > 1) { i --; alert("每次只允許添加1道問題"); } else { var t = document.createElement('table'); //動態添加第一行 var tr1 = t.insertRow(-1); var td11 = tr1.insertCell(-1); td11.align="right"; td11.width="180"; var td12 = tr1.insertCell(-1); //設置內容和屬性 td11.innerHTML = "題目 :"; td12.innerHTML = "<input type='text' name='textTitle' id='textTitle' /><input type='hidden' name='quesLeixing' value='image' id='quesLeixing'/> <input type=button value='刪除該題' onclick='deleteTable(this)'/>"; //動態添加第二行 var tr1 = t.insertRow(-1); var td11 = tr1.insertCell(-1); td11.align="right"; td11.width="180"; var td12 = tr1.insertCell(-1); //設置內容和屬性 td11.innerHTML = "添加圖片文件 :"; td12.innerHTML = "<input type='file' name='myFile' id='imageFile' />"; //添加第三行 var tr2 = t.insertRow(-1); var td11 = tr2.insertCell(-1); td11.align="right"; var td12 = tr2.insertCell(-1); //設置內容和屬性 td11.innerHTML = "試題類型 :"; td12.innerHTML = "<input type='radio' name='textQuesType' value='single' checked='checked'/>單選題 <input type=radio name='textQuesType' value='multiple'/>多選題"; //添加第四行 var tr3 = t.insertRow(-1); var td31 = tr3.insertCell(-1); td31.align="right"; var td32 = tr3.insertCell(-1); //設置內容和屬性 td31.innerHTML = "選項1 :"; td32.innerHTML = "<input type='text' name='textOption[0].optionName' id='textOption[0].optionName' />是否是正確答案：<input type='checkbox' name='answer' value='0'/>"; //添加第五行 var tr3 = t.insertRow(-1); var td31 = tr3.insertCell(-1); td31.align="right"; var td32 = tr3.insertCell(-1); //設置內容和屬性 td31.innerHTML = "選項2 :"; td32.innerHTML = "<input type='text' name='textOption[1].optionName' id='textOption[1].optionName' />是否是正確答案：<input type='checkbox' name='answer' value='1' />"; //添加第六行 var tr3 = t.insertRow(-1); var td31 = tr3.insertCell(-1); td31.align="right"; var td32 = tr3.insertCell(-1); //設置內容和屬性 td31.innerHTML = "選項3 :"; td32.innerHTML = "<input type='text' name='textOption[2].optionName' id='textOption[2].optionName' />是否是正確答案：<input type='checkbox' name='answer' value='2' />"; //添加第七行 var tr3 = t.insertRow(-1); var td31 = tr3.insertCell(-1); td31.align="right"; var td32 = tr3.insertCell(-1); //設置內容和屬性 td31.innerHTML = "選項4 :"; td32.innerHTML = "<input type='text' name='textOption[3].optionName' id='textOption[3].optionName' />是否是正確答案：<input type='checkbox' name='answer' value='3' />"; //添加第八行 var tr3 = t.insertRow(-1); var td31 = tr3.insertCell(-1); td31.align="right"; var td32 = tr3.insertCell(-1); //設置內容和屬性 td31.innerHTML = "選項5 :"; td32.innerHTML = "<input type='text' name='textOption[4].optionName' id='textOption[4].optionName' />是否是正確答案：<input type='checkbox' name='answer' value='4' />"; t.setAttribute("frame", "below"); t.setAttribute("width", "676"); //t.setAttribute("border", "1"); t.setAttribute("bordercolor", "#818181"); document.getElementById('table1').appendChild(t); } } </script> </head> <body> <font color="#B3171C" size="5">添加測評問題</font><p/> <table width="677" border="0" id="quesTable"> <tbody> <tr> <td colspan="3" align="center">選擇添加試題類型： <input type="button" name="addtext" value="圖片類型" onclick="createImageTable()" /> </td> </tr> </tbody> </table> </form> </div> </body> </html>