1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 table{
9 border: 1px solid;
10 margin: auto;
11 width: 500px;
12 }
13
14 td,th{
15 text-align: center;
16 border: 1px solid;
17 }
18 div{
19 text-align: center;
20 margin: 50px;
21 }
22 </style>
23 </head>
24 <body>
25 <div>
26 <input type="text" id="id" placeholder="请输入编号">
27 <input type="text" id="name" placeholder="请输入姓名">
28 <input type="text" id="gender" placeholder="请输入性别">
29 <input type="button" value="添加" id="btn_add">
30 </div>
31
32 <table>
33 <caption>学生信息表</caption>
34 <tr>
35 <th>编号</th>
36 <th>姓名</th>
37 <th>性别</th>
38 <th>操作</th>
39 </tr>
40 <tr>
41 <td>1</td>
42 <td>令狐冲</td>
43 <td>男</td>
44 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> <!--this代表当前超链接这个对象-->
45 </tr>
46 <tr>
47 <td>2</td>
48 <td>任我行</td>
49 <td>男</td>
50 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
51 </tr>
52 <tr>
53 <td>3</td>
54 <td>岳不群</td>
55 <td>?</td>
56 <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
57 </tr>
58 </table>
59
60 <script>
61 /*
62 分析：
63 1.添加：
64 1. 给添加按钮绑定单击事件
65 2. 获取文本框的内容
66 3. 创建td，设置td的文本为文本框的内容。
67 4. 创建tr
68 5. 将td添加到tr中
69 6. 获取table，将tr添加到table中
70 2.删除：
71 1.确定点击的是哪一个超链接
72 <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
73 2.怎么删除？
74 removeChild():通过父节点删除子节点
75 */
76
77 /**
78 * 添加功能-原始繁琐版
79 */
80 document.getElementById("btn_add").onclick = function () {
81 var id = document.getElementById("id").value;
82 var name = document.getElementById("name").value;
83 var gender = document.getElementById("gender").value;
84
85 var td_id = document.createElement("td");
86 var text_id = document.createTextNode(id);
87 td_id.appendChild(text_id);
88 var td_name = document.createElement("td");
89 var text_name = document.createTextNode(name);
90 td_name.appendChild(text_name);
91 var td_gender = document.createElement("td");
92 var text_gender = document.createTextNode(gender);
93 td_gender.appendChild(text_gender);
94
95 var td_a = document.createElement("td");
96 var ele_a = document.createElement("a");
97 ele_a.setAttribute("href", "javascript:void(0);");
98 ele_a.setAttribute("onclick", "delTr(this);");
99 var text_a = document.createTextNode("删除");
100 ele_a.appendChild(text_a);
101 td_a.appendChild(ele_a);
102
103 var tr = document.createElement("tr");
104
105 tr.appendChild(td_id);
106 tr.appendChild(td_name);
107 tr.appendChild(td_gender);
108 tr.appendChild(td_a);
109
110 var table = document.getElementsByTagName("table")[0];
111 table.appendChild(tr);
112 }
113
114 /**
115 * 删除功能
116 */
117 function delTr(obj) {
118 // alert(obj); //javascript:void(0);
119 var table = obj.parentNode.parentNode.parentNode;
120 var tr = obj.parentNode.parentNode;
121 table.removeChild(tr);
122 }
123 </script>
124 </body>
125 </html>
