案例：实现一个动态表格：实现添加功能和删除功能
使用Node方式：
添加
1.给添加按钮添加点击事件
2.获取文本框的内容
3.创建td,td设置td的文体为文本框的内容
4.创建tr,将td添加成tr的子元素
5.获取table元素,将tr元素添加成table元素的子元素*
删除
1.确定是那一个超链接
在a链接上添加一个点击事件调用删除方法，并且给一个参数获取当前的是那一个a标签
2.删除 通过a标签的父标签tr标签的父标签table 删除当前的tr标签就可以完成这个功能
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>动态表格
table {
border:1px solid;
margin:auto;
width:500px;
}
td, th {
text-align:center;
border:1px solid;
}
div {
text-align:center;
margin:50px;
}
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
<caption>学生信息表
<th>编号
<th>姓名
<th>性别
<th>操作
<td>1
<td>令狐冲
<td>男
<td><a href="javascript:void(0);" onclick="delTr(this);">删除
<td>2
<td>任我行
<td>男
<td><a href="javascript:void(0);" onclick="delTr(this);" >删除
<td>3
<td>岳不群
<td>男
<td><a href="javascript:void(0);" onclick="delTr(this);">删除
//添加功能
//1.获取按钮元素
document.getElementById("btn_add").onclick =function () {
//2.获取文本框中的内容
var id = document.getElementById("id").value;//获取HTML元素的属性
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//创建a标签,设置a标签的属性
var a = document.createElement("a");
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onclick","delTr(this);");
a.innerHTML="删除";
//2.1将文本框的内容封装到文本节点中，不能直接使用文本
var id_node = document.createTextNode(id);
var name_node = document.createTextNode(name);
var gender_node = document.createTextNode(gender);
// 3.创建td,td设置td的文体为文本框的内容
var td_id = document.createElement("td");
td_id.appendChild(id_node);
var td_name = document.createElement("td");
td_name.appendChild(name_node);
var td_gender = document.createElement("td");
td_gender.appendChild(gender_node);
var td_a = document.createElement("td");
td_a.appendChild(a);
//4.创建tr,将td添加成tr的子元素
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//5.获取table元素,将tr元素添加成table元素的子元素
document.getElementsByTagName("table")[0].appendChild(tr);
}
//删除功能
function delTr(obj) {
//1.获取table元素
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
//删除table下的tr
table.removeChild(tr);
}
</html>
2.使用innerHTML的方式实现添加
//使用innerHTML实现添加功能
document.getElementById("btn_add").onclick =function () {
//2.获取文本框中的内容
var id = document.getElementById("id").value;//获取HTML元素的属性
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table元素
var table = document.getElementsByTagName("table")[0];
table.innerHTML +="<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
" </tr>";
};
就简单很多了
tip：
超链接功能
1，可以被点击
2，点击后跳转指定的href的url
我们的需求是 保留1功能，去掉2功能
方法：在href属性中添加 href="javascript:void(0)";就可以完成指定的需求
这个方法的实质是：执行了一个js代码void(0);
下一篇 DOM 中的事件
