javaSrcipt动态添加删除表格

css部分
《 #formDiv {
width: 270px;
border: 1px solid;
margin: 30px 0 0 600px;
}
.nameTdpro{
text-align: center;
}
.emailTdpro{
text-align: center;
}
.salaryTdpro{
text-align: center;
}
.aTdpro{
text-align: center;
}
》
HTML部分
《
< tr align=“center”>
< th >地区< /th >
< th >手机号< /th >
< th >姓名< /th >
< th >删除</ th >
< /tr>

		<tr align="center">
			<td>河南</td>
			<td>110</td>
			<td>李四</td>
			<td><a href="javascript:;">删除</a></td>
		</tr>

		<tr align="center">
			<td>北京</td>
			<td>120</td>
			<td>张三</td>
			<td><a href="javascript:;">删除</a></td>
		</tr>
		<tr align="center">
			<td>北京</td>
			<td>119</td>
			<td>张三</td>
			<td><a href="javascript:;">删除</a></td>
		</tr>

	</table>

	<div id="formDiv">
		<h3>添加新员工</h3>
		<tr>
			<td class='word'>地区</td>
			<td class="inp">
				<input type="text" name="empName" id="empName" style="margin: 0 0 0 16px;" />
			</td>
		</tr>
		<tr>
			<br>
			<td class='word'>手机号</td>
			<td class="inp">
				<input type="text" name="email" id="email" />
			</td>
		</tr>
		<tr>
			<br>
			<td class='word'>姓名</td>
			<td class="inp">
				<input type="text" name="salary" id="salary" style="margin: 0 0 0 16px;" />
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center"></td>
			<button id="addEmpButton" value="abc">
				添加
			</button>
		</tr>
	</div>

》

JS部分
《

var allA = document.getElementsByTagName('a');
		var td = document.getElementsByTagName('td');
		var tr = document.getElementsByTagName('tr');
		// 给每一个超链接绑定点击事件
		for (var i = 0; i < allA.length; i++) {
			allA[i].onclick = function() {
				// 获取当前的tr
				var td = this.parentNode.parentNode;
				// 获取要删除的员工的名字

				// 删除之前弹出一个框
				var flag = confirm('确认删除么?')
				// 如果点取消就不删除 点了确定就删除
				if (flag) {
					td.parentNode.removeChild(td);
				}

				// return false;
			}
		}
		// 添加员工的功能  
		//点击按钮后 将员工的信息添加到表格中
		var addEmpButton = document.getElementById('addEmpButton');
		addEmpButton.onclick = function() {
				// 获取员工的地区  用户添加的信息
				var name = document.getElementById('empName').value;
				// 获取员工的手机号
				var email = document.getElementById('email').value;
				// 获取员工的名字
				var salary = document.getElementById('salary').value;
				// 需要将保存的信息 保存到tr里
				var tr = document.createElement('tr');
				
				
		// 简单的方法	
				tr.innerHTML = '<td>'+ name+'</td>'+
				'<td>'+ email+'</td>'+
				'<td>'+ salary+'</td>'+
				'<td><a href="javascript:;">删除</a></td>';
			var a = tr.getElementsByTagName('a')[0];
			a.onclick = function() {
				// 获取当前的tr
				var td = this.parentNode.parentNode;
				// 获取要删除的员工的名字

				// 删除之前弹出一个框
				var flag = confirm('确认删除么?')
				// 如果点取消就不删除 点了确定就删除
				if (flag) {
					td.parentNode.removeChild(td);
				}

				return false;
			}
				
				
				
				
				// 复杂的方法
			// 	var nameTd = document.createElement('td');
			// 	var emailTd = document.createElement('td');
			// 	var salaryTd = document.createElement('td');
			// 	var aTd = document.createElement('td');
			// 	// 创建一个a链接
			// 	var a = document.createElement('a');
			// 	// 创建文本节点
			// 	var nameText = document.createTextNode(name);
			// 	var emailText = document.createTextNode(email);
			// 	var salaryText = document.createTextNode(salary);
			// 	var delText = document.createTextNode('删除	');

			// 	//将文本添加到td中  
			// 	nameTd.appendChild(nameText);
			// 	emailTd.appendChild(emailText);
			// 	salaryTd.appendChild(salaryText);
			// 	// 向a添加文本
			// 	a.appendChild(delText);
			// 	aTd.appendChild(a);
				
			// 	//将td 添加到tr中
			// 	tr.appendChild(nameTd);
			// 	tr.appendChild(emailTd);
			// 	tr.appendChild(salaryTd);
			// 	tr.appendChild(aTd);
			// 	nameTd.className = 'nameTdpro';
			// 	emailTd.className = 'emailTdpro';
			// 	salaryTd.className = 'salaryTdpro';
			// 	aTd.className = 'aTdpro';
			// 	a.href = 'javascript:;';
			// 	//获取table
			// 	//为新添加的a 添加点击事件
			// 	a.onclick =  function() {
			// 	// 获取当前的tr
			// 	var td = this.parentNode.parentNode;
			// 	// 获取要删除的员工的名字

			// 	// 删除之前弹出一个框
			// 	var flag = confirm('确认删除么?')
			// 	// 如果点取消就不删除 点了确定就删除
			// 	if (flag) {
			// 		td.parentNode.removeChild(td);
			// 	}
			// 	return false;
			// }
			
			
			
				var employeeTable = document.getElementById('employeeTable');
				
				// 获取到employeetable 中的tboay
				var tbody = employeeTable.getElementsByTagName('tbody')[0];
				// 将tr 添加到table中
				tbody.appendChild(tr);

				}

》

截图: