JS实现简单的表单增加删除功能

亦凉 2022-02-22 18:48 523阅读 0赞

html部分：

css部分：

*{
    	margin: 0;
    	padding: 0;
    }
    div{
    	width: 80%;
    	margin: 20px auto;
    	text-align: center;
    }
    table{
    	margin-top: 30px;
    	border-collapse: collapse;
    }
    tr td,tr th{
    	border: 1px solid gray;
    	width: 300px;
    	line-height: 35px;
    	text-align: center;
    }

JS部分：

整体代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		div{
    			width: 80%;
    			margin: 20px auto;
    			text-align: center;
    		}
    		table{
    			margin-top: 30px;
    			border-collapse: collapse;
    		}
    		tr td,tr th{
    			border: 1px solid gray;
    			width: 300px;
    			line-height: 35px;
    			text-align: center;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<label for="">编号：</label><input type="text" id="txt1">
    		<label for="">姓名：</label><input type="text" id="txt2">
    		<label for="">住址：</label><input type="text" id="txt3">
    		<button id="btn">添加</button>
    		<table>
    			<tbody id="body">
    				<tr>
    					<th>编号</th>
    					<th>姓名</th>
    					<th>住址</th>
    					<th>操作</th>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    	<script type="text/javascript">
    		var id = document.getElementById('txt1');			//编号
    		var xname = document.getElementById('txt2');			//姓名
    		var address = document.getElementById('txt3');		//地址
    		var btn = document.getElementById('btn');			//添加按钮
    		var tbody = document.getElementById('body');
    		//添加点击事件
    		btn.onclick = function () {
    			var tr = createTr();
    			tbody.appendChild(tr);
    		};
    		function createTr() {
    			var tr = document.createElement('tr');
    			var td1 = createCell(id.value,false);
    			var td2 = createCell(xname.value,false);
    			var td3 = createCell(address.value,false);
    			var td4 = createCell("删除",true);
    			tr.appendChild(td1);
    			tr.appendChild(td2);
    			tr.appendChild(td3);
    			tr.appendChild(td4);
    			return tr;
    		}
    		function createCell(value,isLink) {
    			var cell = document.createElement('td');
    			if(isLink){
    				var link = document.createElement('a');
    				link.href = '#';
    				link.innerHTML = value;
    				cell.appendChild(link);
    				//点击删除时，删除一行
    				link.onclick = function () {
    					var tr = this.parentNode.parentNode;
    					tr.parentNode.removeChild(tr);
    				}
    			}else{
    				cell.innerHTML = value;
    			}
    			
    			return cell;
    		}
    	</script>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70]  
我们当我们点击添加的时候向里面添加一行信息：  
点击添加前：  
![在这里插入图片描述][20190409192628694.png]  
点击添加后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 1]  
当我们点击删除时，删除一行：  
点击删除前：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 2]  
点击删除后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 3]  
此篇博文中存在的bug在下一篇博文中已完善，详情参见：[完整代码][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70]: /images/20220222/eaae65b0f1064b91af12a86438358a73.png
[20190409192628694.png]: /images/20220222/e981109f3ed54988b11080ac727c8404.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 1]: /images/20220222/668d0c3753894e739d879d2afcceef90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 2]: /images/20220222/4595f95bc6be4dddae8685fe69fcab58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM1NTc1OA_size_16_color_FFFFFF_t_70 3]: /images/20220222/508b7f0785e148799ac9947553bc1478.png
[Link 1]: https://blog.csdn.net/weixin_41355758/article/details/89219349