-
动态生成一个表格,定义一个表单,用户输入内容,就可以自动将内容添加到表格中,表格中尾部添加一个删除操作,可以删除单个数据,最后添加一个按钮可以删除表格中的所有数据
-
初始化html页面
<html>
<head>
<title>动态页面!</title>
<meta charset="utf-8"/>
</head>
<script type="text/javascript">
window.onload = function(){
}
</script>
<body>
<div id="inputDiv">
部门编号:<input name="deptno" id="deptno" type="text" ><br/>
部门名称:<input name="dname" id="dname" type="text" ><br/>
部门位置:<input name="loc" id="loc" type="text" ><br/>
<input type="button" id="addBut" value="增加"/>
</div>
<div id="tableDiv">
<table border="1" width="100%">
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
<td>操作</td>
</tr>
</table>
<input type="button" id="delAllBut" value="删除全部"/>
</div>
</body>
</html>
- 初始化页面效果
- 添加javascript代码
<script type="text/javascript">
window.onload = function(){
//获取到两个按钮的元素
var addButEle = document.getElementById("addBut");
var delAllButEle = document.getElementById("delAllBut");
//为按钮绑定点击事件
addButEle.addEventListener("click",function(){add();},false)
delAllButEle.addEventListener("click",function(){deleteAll();},false)
}
//添加数据的方法
function add(){
//获取到要增加的数据内容
var deptno = document.getElementById("deptno").value;
var dname = document.getElementById("dname").value;
var loc = document.getElementById("loc").value;
//得到要添加到的表格元素
var tableEle = document.getElementById("deptTable");
addRow(deptno,dname,loc,deptTable);
clearInput("deptno","dname","loc");
}
//增加表格行的方法
function addRow(deptno,dname,loc,tableEle){
//创建tr元素(行元素)
var trEle = document.createElement("tr");
//设置表格行的id属性,默认这个id值为"row + deptno",deptno的值不能够重复
trEle.setAttribute("id","row"+deptno);
//创建四个td元素,单元格
var deptnoTd = document.createElement("td");
var dnameTd = document.createElement("td");
var locTd = document.createElement("td");
var delTd = document.createElement("td");
//向单元格中添加数据
deptnoTd.appendChild(document.createTextNode(deptno));
dnameTd.appendChild(document.createTextNode(dname));
locTd.appendChild(document.createTextNode(loc));
//设置删除按钮
//为了达到删除的目的使用按钮完成
var delBut = document.createElement("input");
delBut.setAttribute("value","删除");
delBut.setAttribute("type","button");
//为此按钮绑定事件
delBut.addEventListener("click",function(){
//获取到当前表格行的元素
var trEle = document.getElementById("row"+deptno);
//删除当前行
trEle.parentNode.removeChild(trEle);
},false);
delTd.appendChild(delBut);
//将td元素添加为tr的子元素
trEle.appendChild(deptnoTd);
trEle.appendChild(dnameTd);
trEle.appendChild(locTd);
trEle.appendChild(delTd);
//将tr元素设置为table元素的子元素
tableEle.appendChild(trEle);
}
//清空表格的方法
function clearInput(inputA,inputB,inputC){
document.getElementById(inputA).value = "";
document.getElementById(inputB).value = "";
document.getElementById(inputC).value = "";
}
//删除表格全部数据的方法
function deleteAll(){
//得到所有tr元素
var trNodes = document.getElementsByTagName("tr");
var len = trNodes.length;
//第0行是表格的表头部分,不要删除,从第1行开始
for(var x = 1; x < len; x++){
if(trNodes[1] != undefined){}
trNodes[1].parentNode.removeChild(trNodes[1]);
}
}
</script>
- 添加JavaScript后的页面效果