使用Javascript制作动态表格
JavaScript 动态表格的实现，效果：当点击最后一行时，动态生成新的一行。实现了文本框、单选框、下拉框的动态生成。
?
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ActiveTable 动态表格</title></head><h2>员工信息统计表</h2><body> <table id="activetable" border="1" > <tr><th>工 号</th><th>姓 名</th><th>性 别</th><th>职 务</th></tr> <tr> <td><input type="text" name="number" size="8" onclick="addRow();"></td> <td><input type="text" name="realname" size="18"></td> <td><input type="radio" name="sex" value="男" checked="checked" size="6"><label>男</label> <input type="radio" name="sex" value="女" size="6"><label>女</label> </td> <td> <select name="duty" style="width: 100px;"> <option value="manager">经理</option> <option value="assistantmanager">副经理</option> <option value="employee">员工</option> </select> </td> </tr> </table></body><script type="text/javascript"> function addRow(){ var activetable = document.getElementById("activetable"); //找到表格 var tr = document.createElement("tr"); //创建一行 var td1 = document.createElement("td"); //创建第一个td，工号 var numberField=document.createElement("input"); numberField.setAttribute("type", "text"); numberField.setAttribute("name", "number"); numberField.setAttribute("size","8"); //宽度为8个字符 numberField.setAttribute("onclick","addRow()"); //为其添加onclick事件 td1.appendChild(numberField); //将input放入td1 tr.appendChild(td1); //将td1放入tr var td2 = document.createElement("td"); //创建第二个td,姓名 var realnameField=document.createElement("input"); realnameField.setAttribute("type", "text"); realnameField.setAttribute("name", "number"); realnameField.setAttribute("size", "18"); td2.appendChild(realnameField); tr.appendChild(td2); var td3 = document.createElement("td"); //创建第三个td,性别 var maleField = document.createElement("input"); maleField.setAttribute("type","radio"); //创建radio,"男" maleField.setAttribute("checked","checked"); var textMale = document.createTextNode("男"); //创建文本节点,"男" var femaleField = document.createElement("input"); femaleField.setAttribute("type","radio"); //创建radio,"女" var textFemale = document.createTextNode(" 女 "); //创建文本节点，"女" td3.appendChild(maleField); td3.appendChild(textMale); td3.appendChild(femaleField); td3.appendChild(textFemale); tr.appendChild(td3); var td4 = document.createElement("td"); //创建第四个td,职务 var dutyField= document.createElement("select"); //创建下拉框 dutyField.setAttribute("name","duty"); dutyField.setAttribute("style","width:100px"); //设置下拉框宽度为100px dutyField.appendChild( createOption("经理 ")); dutyField.appendChild( createOption("副经理 ")); dutyField.appendChild( createOption("员工 ")); td4.appendChild(dutyField); tr.appendChild(td4); var tbody=activetable.children[0]; tbody.appendChild(tr); var trArray=tbody.children; var lastTR=trArray[trArray.length-2]; //取得倒数第2个tr var lastInput=lastTR.children[0].children[0]; //第1个格子中的输入框 lastInput.removeAttribute("onclick"); //去掉倒数第二行第一格的onclick事件 } function createOption(text){ //由文本生成文本节点，用于创建select的option var option=document.createElement("option"); option.setAttribute("value",text); option.appendChild(document.createTextNode(text)); return option; } </script></html>?
?
效果图：
?
?