施用Javascript制作动态表格
日期：2014-05-16 浏览次数：20432 次
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事件
}
func
