原生js实现表格数据的增加和删除

再一次记录已经是找到工作之后了，实习工作，工资很低，但是能学到东西就好了。

首先分析一下增加和删除的一些思路，增加：即获取用户在表单输入的数据，然后通过表格显示出来；删除，即点击“删除”，将删除表格中的一些数据。做好之后的大致是这样：

点击‘新增’按钮，把表单中的数据提交到表格内，点击表格中的‘删除’按钮，即删除当前行。

还是废话不多说，直接上代码


	<table border="1" cellspacing="0" cellpadding="5px">
			<tr>
				<td>员工姓名</td>
				<td>员工性别</td>
				<td>员工编号</td>
				<td>员工操作</td>
			</tr>
			<tr>
				<td>李铁柱</td>
				<td>男</td>
				<td>007</td>
				<td>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>王二狗</td>
				<td>男</td>
				<td>38</td>
				<td>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>李鸭蛋</td>
				<td>女</td>
				<td>250</td>
				<td>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>	
				<td>王二丫</td>
				<td>女</td>
				<td>251</td>
				<td>	
					<a href="#">删除</a>
				</td>
			</tr>
			
	</table>
	<form action=""> 
		姓名：<input type="text" value=" "><br>
		性别：<input type="text" value=""><br>
		编号：<input type="text" value=''><br>

		<input type="button" value="新增">
		<button type="button" >查看姓名和性别</button>
	</form>

HTML内容比较简单，table加form的三个表单和两个按钮，即为上面的图中内容所显示。

接下来，去研究js代码，首先要获取DOM元素，并绑定按钮的点击事件。在这里说一下，先获取input内的value值，再去写按钮点击事件直接操作是存在问题的，第一次用户输入表单内的值，点击按钮获取，控制台会显示当前用户输入的值，但是当用户要重新修改值之后，再点击按钮获取，会发现获取的还是上一次的值，只要页面不刷新，都无法获取到用户在第一次之后再提交的值。所以，每一次获取都应该在点击按钮之后获取。

<script type="text/javascript">

		var btn1 = document.querySelectorAll('input')[3];

		var btn2 = document.querySelector('button');
                

                //表单的内容 要在用户点击按钮之后获取，这样能获取到每一次用户所输入的值
		btn2.onclick =function(){
			
			var name = document.querySelectorAll('form input')[0].value;

			var sex = document.querySelectorAll('input')[1].value;

			var num = document.querySelectorAll('input')[2].value;
			
			alert(name+' ,'+sex+','+num);

		}

		btn1.onclick = function(){

			var name = document.querySelectorAll('form input')[0].value;

			var sex = document.querySelectorAll('input')[1].value;

			var num = document.querySelectorAll('input')[2].value;

			// var allTr = document.querySelectorAll('tr');
			var tr = document.createElement('tr');

			var tbody = document.querySelector('tbody');
			// 增减删除的a链接
			
			var delA = document.createElement('a');

			// 给a标签增加一个子节点  删除
			
			delA.appendChild(document.createTextNode('删除'));

			delA.setAttribute("href","#");

			

			// console.log(delA);

			var array = [name,sex,num,delA];

			for(i=0;i<4;i++){

					// 创建一个td节点
			    var td = document.createElement('td');
			    if (array[i] != "") {

				if (i<3) {
                                 td.appendChild(document.createTextNode(array[i]));
			        // 让创建的td找到他的父元素tr
				tr.appendChild(td);

						}else if (i=3) {
								td.appendChild(array[i]);
					tr.appendChild(td);
								
					array[i].onclick = function(){

				    var flag = confirm('您确认要删除'+tr.children[0].innerText+'吗?')
				    if (flag) {

										tr.parentNode.removeChild(tr);

									}
								}
							}
							
						}else {
							alert("请输入正确的字符");
							break;
						}
			}
			
			// 让tr找到他真正的父亲tbody
			tbody.appendChild(tr);
		};
			// 删除节点的功能

			var allA = document.querySelectorAll('a');
		
			for(i = 0; i <allA.length;i++){
				allA[i].num = i;
				allA[i].onclick = function(){

					index = this.num;

					var b = allA[index].parentNode.parentNode;					

					var flag = confirm('您确认要删除'+b.children[0].innerText +'吗?');
					
					if (flag) {				
						// b == tr
						b.parentNode.removeChild(b);

					}
				}
			}
	</script>

通过for循环，来增加四个td，并且将创建的数组（即用户输入的name，number ，sex，和最后一个‘删除’的a标签）与每个td的内容相对应。在这里我用的一个if判断，当i<3的时候，将td节点添加，当i=3 的时候，添加a删除的标签，并且绑定点击删除事件。最后面的部分即为删除节点的代码，因为js的异步特点，所以只能通过用.num来存储每一个i，然后通过全部变量index来获取当前的i值。实现删除当前行的功能。

如果有不好的地方，还望及时指点批评。

原生js实现表格数据的增加和删除

猜你喜欢