DOM 表格删除tr,新增tr功能

删除tr

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>添加删除记录练习</title>
  6 <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
  7 <script type="text/javascript">
  8     
  9     window.onload = function(){
 10         
 11         /*
 12          * 点击超链接以后，删除一个员工的信息
 13          */
 14         
 15         //获取所有额超链接
 16         var allA = document.getElementsByTagName("a");
 17         
 18         //为每个超链接都绑定一个单击响应函数
 19         for(var i=0 ; i < allA.length ; i++){
 20             allA[i].onclick = function(){
 21                 
 22                 //点击超链接以后需要删除超链接所在的那行
 23                 //这里我们点击那个超链接this就是谁
 24                 //获取当前tr
 25                 var tr = this.parentNode.parentNode;
 26                 
 27                 //获取要删除的员工的名字
 28                 //var name = tr.getElementsByTagName("td")[0].innerHTML;
 29                 var name = tr.children[0].innerHTML;
 30                 
 31                 //删除之前弹出一个提示框
 32                 /*
 33                  * confirm()用于弹出一个带有确认和取消按钮的提示框
 34                  *     需要一个字符串作为参数，该字符串将会作为提示文字显示出来
 35                  * 如果用户点击确认则会返回true，如果点击取消则返回false
 36                  */
 37                 var flag = confirm("确认删除"+name+"吗?");
 38                 
 39                 //如果用户点击确认
 40                 if(flag){
 41                     //删除tr
 42                     tr.parentNode.removeChild(tr);
 43                 }
 44                 
 45                 /*
 46                  * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
 47                  *     但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
 48                  */
 49                 return false;
 50             };
 51         }
 52         
 53     };
 54 
 55     
 56 </script>
 57 </head>
 58 <body>
 59 
 60     <table id="employeeTable">
 61         <tr>
 62             <th>Name</th>
 63             <th>Email</th>
 64             <th>Salary</th>
 65             <th>&nbsp;</th>
 66         </tr>
 67         <tr>
 68             <td>Tom</td>
 69             <td>tom@tom.com</td>
 70             <td>5000</td>
 71             <td><a href="javascript:;">Delete</a></td>
 72         </tr>
 73         <tr>
 74             <td>Jerry</td>
 75             <td>jerry@sohu.com</td>
 76             <td>8000</td>
 77             <td><a href="deleteEmp?id=002">Delete</a></td>
 78         </tr>
 79         <tr>
 80             <td>Bob</td>
 81             <td>bob@tom.com</td>
 82             <td>10000</td>
 83             <td><a href="deleteEmp?id=003">Delete</a></td>
 84         </tr>
 85     </table>
 86 
 87     <div id="formDiv">
 88     
 89         <h4>添加新员工</h4>
 90 
 91         <table>
 92             <tr>
 93                 <td class="word">name: </td>
 94                 <td class="inp">
 95                     <input type="text" name="empName" id="empName" />
 96                 </td>
 97             </tr>
 98             <tr>
 99                 <td class="word">email: </td>
100                 <td class="inp">
101                     <input type="text" name="email" id="email" />
102                 </td>
103             </tr>
104             <tr>
105                 <td class="word">salary: </td>
106                 <td class="inp">
107                     <input type="text" name="salary" id="salary" />
108                 </td>
109             </tr>
110             <tr>
111                 <td colspan="2" align="center">
112                     <button id="addEmpButton" value="abc">
113                         Submit
114                     </button>
115                 </td>
116             </tr>
117         </table>
118 
119     </div>
120 
121 </body>
122 </html>

css

 1 @CHARSET "UTF-8";
 2 #total {
 3     width: 450px;
 4     margin-left: auto;
 5     margin-right: auto;
 6 }
 7 
 8 ul {
 9     list-style-type: none;
10 }
11 
12 li {
13     border-style: solid;
14     border-width: 1px;
15     padding: 5px;
16     margin: 5px;
17     background-color: #99ff99;
18     float: left;
19 }
20 
21 .inner {
22     width: 400px;
23     border-style: solid;
24     border-width: 1px;
25     margin: 10px;
26     padding: 10px;
27     float: left;
28 }
29 
30 #employeeTable {
31     border-spacing: 1px;
32     background-color: black;
33     margin: 80px auto 10px auto;
34 }
35 
36 th,td {
37     background-color: white;
38 }
39 
40 #formDiv {
41     width: 250px;
42     border-style: solid;
43     border-width: 1px;
44     margin: 50px auto 10px auto;
45     padding: 10px;
46 }
47 
48 #formDiv input {
49     width: 100%;
50 }
51 
52 .word {
53     width: 40px;
54 }
55 
56 .inp {
57     width: 200px;
58 }

添加tr

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3 
  4     <head>
  5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6         <title>添加删除记录练习</title>
  7         <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
  8         <script type="text/javascript">
  9         
 10             /*
 11              * 删除tr的响应函数
 12              */
 13             function delA() {
 14 
 15                 //点击超链接以后需要删除超链接所在的那行
 16                 //这里我们点击那个超链接this就是谁
 17                 //获取当前tr
 18                 var tr = this.parentNode.parentNode;
 19 
 20                 //获取要删除的员工的名字
 21                 //var name = tr.getElementsByTagName("td")[0].innerHTML;
 22                 var name = tr.children[0].innerHTML;
 23 
 24                 //删除之前弹出一个提示框
 25                 /*
 26                  * confirm()用于弹出一个带有确认和取消按钮的提示框
 27                  *     需要一个字符串作为参数，该字符串将会作为提示文字显示出来
 28                  * 如果用户点击确认则会返回true，如果点击取消则返回false
 29                  */
 30                 var flag = confirm("确认删除" + name + "吗?");
 31 
 32                 //如果用户点击确认
 33                 if(flag) {
 34                     //删除tr
 35                     tr.parentNode.removeChild(tr);
 36                 }
 37 
 38                 /*
 39                  * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
 40                  *     但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
 41                  */
 42                 return false;
 43             };
 44 
 45             window.onload = function() {
 46 
 47                 /*
 48                  * 点击超链接以后，删除一个员工的信息
 49                  */
 50 
 51                 //获取所有额超链接
 52                 var allA = document.getElementsByTagName("a");
 53 
 54                 //为每个超链接都绑定一个单击响应函数
 55                 for(var i = 0; i < allA.length; i++) {

* for循环会在页面加载完成之后立即执行，

* 而响应函数会在超链接被点击时才执行

* 当响应函数执行时，for循环早已执行完毕

 56                     allA[i].onclick = delA;
 57                 }
 58 
 59                 /*
 60                  * 添加员工的功能
 61                  *     - 点击按钮以后，将员工的信息添加到表格中
 62                  */
 63 
 64                 //为提交按钮绑定一个单击响应函数
 65                 var addEmpButton = document.getElementById("addEmpButton");
 66                 addEmpButton.onclick = function() {
 67 
 68                     //获取用户添加的员工信息
 69                     //获取员工的名字
 70                     var name = document.getElementById("empName").value;
 71                     //获取员工的email和salary
 72                     var email = document.getElementById("email").value;
 73                     var salary = document.getElementById("salary").value;
 74 
 75                     //alert(name+","+email+","+salary);
 76                     /*
 77                      *  <tr>
 78                             <td>Tom</td>
 79                             <td>tom@tom.com</td>
 80                             <td>5000</td>
 81                             <td><a href="javascript:;">Delete</a></td>
 82                         </tr>
 83                         需要将获取到的信息保存到tr中
 84                      */
 85 
 86                     //创建一个tr
 87                     var tr = document.createElement("tr");
 88 
 89                     //设置tr中的内容
 90                     tr.innerHTML = "<td>"+name+"</td>"+
 91                                     "<td>"+email+"</td>"+
 92                                     "<td>"+salary+"</td>"+
 93                                     "<td><a href='javascript:;'>Delete</a></td>";
 94                                     
 95                     //获取刚刚添加的a元素，并为其绑定单击响应函数                
 96                     var a = tr.getElementsByTagName("a")[0];
 97                     a.onclick = delA;
 98                     
 99                     //获取table
100                     var employeeTable = document.getElementById("employeeTable");
101                     //获取employeeTable中的tbody.浏览器默认添加的
102                     var tbody = employeeTable.getElementsByTagName("tbody")[0];
103                     //将tr添加到tbodye中
104                     tbody.appendChild(tr);
105                     /*tbody.innerHTML += "<tr>"+
106                     
107                     "<td>"+name+"</td>"+
108                                     "<td>"+email+"</td>"+
109                                     "<td>"+salary+"</td>"+
110                                     "<td><a href='javascript:;'>Delete</a></td>"
111                     
112                     +"</tr>";*/
113 
114                 };
115 
116             };
117         </script>
118     </head>
119 
120     <body>
121 
122         <table id="employeeTable">
123             <tr>
124                 <th>Name</th>
125                 <th>Email</th>
126                 <th>Salary</th>
127                 <th>&nbsp;</th>
128             </tr>
129             <tr>
130                 <td>Tom</td>
131                 <td>tom@tom.com</td>
132                 <td>5000</td>
133                 <td>
134                     <a href="javascript:;">Delete</a>
135                 </td>
136             </tr>
137             <tr>
138                 <td>Jerry</td>
139                 <td>jerry@sohu.com</td>
140                 <td>8000</td>
141                 <td>
142                     <a href="deleteEmp?id=002">Delete</a>
143                 </td>
144             </tr>
145             <tr>
146                 <td>Bob</td>
147                 <td>bob@tom.com</td>
148                 <td>10000</td>
149                 <td>
150                     <a href="deleteEmp?id=003">Delete</a>
151                 </td>
152             </tr>
153         </table>
154 
155         <div id="formDiv">
156 
157             <h4>添加新员工</h4>
158 
159             <table>
160                 <tr>
161                     <td class="word">name: </td>
162                     <td class="inp">
163                         <input type="text" name="empName" id="empName" />
164                     </td>
165                 </tr>
166                 <tr>
167                     <td class="word">email: </td>
168                     <td class="inp">
169                         <input type="text" name="email" id="email" />
170                     </td>
171                 </tr>
172                 <tr>
173                     <td class="word">salary: </td>
174                     <td class="inp">
175                         <input type="text" name="salary" id="salary" />
176                     </td>
177                 </tr>
178                 <tr>
179                     <td colspan="2" align="center">
180                         <button id="addEmpButton">
181                         Submit
182                     </button>
183                     </td>
184                 </tr>
185             </table>
186 
187         </div>
188 
189     </body>
190 
191 </html>