使用JavaScript制作灵活表单----实现（添加数据、删除行的操作）
一、使用到的方法：
1. 通过Id获取元素的方法： document .getElementById（“ ”）;
2. 通过TagName获取元素的方法： document .getElementsByTagName（“ "）；
3. 创建元素的方法： document .createElenment（" "）；
4. 创建文本节点的方法： document .createTextNode（“ ”）或（对象）
5. 添加子节点的方法： 对象名 . appendChild（对象名）
6. 获取当前对象父节点的方法： 对象名 .parentNode
注意：如果获得曾父节点：对象名 . parentNode .parentNode...........
7. 删除子节点的方法： 父节点名 .removeChild（子节点名）
8. 设置元素的属性方法： setAttribute（“ 属性名” , " 属性值"）
9. 元素绑定事件，调函数时，括号里面可以有参数： onclick=" fun（this） "
注意：this指的就是当前对象
二、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加</title>
<style>
<!--给表格设置样式-->
table{
text-align: center;
}
</style>
</head>
<body>
<div>
编号<input type="text" id="No" placeholder="请输入编号">
姓名<input type="text" id="name" placeholder="请输入姓名">
性别 <input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="button" value="添加" onclick="fun()">
</div>
<table border="1" cellspacing="0" width="640px">
<tr>
<th colspan="4">学生信息</th>
</tr>
<tr>
<!--这里使用th可以使文字变大、变粗-->
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<script>
<!--首先要给添加按钮绑定事件-->
function fun(){
//第一步，要获取用户已输入的值
var No=document.getElementById("No").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
//第二步:
// 1.添加 td-No列
var td_No=document.createElement("td");
//添加文本节点
var text_No=document.createTextNode(No);
//在列中添加文本节点
td_No.appendChild(text_No);
//2.添加td_name列
var td_name=document.createElement("td");
//添加文本节点
var text_name=document.createTextNode(name);
//把文本节点添加到列中
td_name.appendChild(text_name);
//3.添加td_gender列
var td_gender=document.createElement("td");
//添加文本节点
var text_gender=document.createTextNode(gender);
//把文本节点添加到列中
td_gender.appendChild(text_gender);
//4.添加td_a列
var td_a=document.createElement("td");
var a=document.createElement("a");
//设置额a标签的属性
a.setAttribute("href","#");
a.setAttribute("id","a");
a.setAttribute("onclick","del()");//this指的是获得当前对象
//添加文本节点
var text=document.createTextNode("删除");
//把文本节点添加到a标签中
a.appendChild(text);
//把a标签添加到列中
td_a.appendChild(a);
//第三步：添加行
var tr=document.createElement("tr");
//第四部把列添加到行中去
tr.appendChild(td_No);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//第五步：把行添加到表格中
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除
function del(){
//获取当前对象
var j=document.getElementById("a");
//获取当前对象所在的表
var table=j.parentNode.parentNode.parentNode;
//获取当前对象所在的行
var tr=j.parentNode.parentNode;
//执行删除操作
table.removeChild(tr);
}
</script>
</body>
</html>
