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

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量9.6k 收藏 24
点赞数 7
分类专栏： JavaScript 文章标签： JavaScript-DOM节点练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41355758/article/details/89159368
版权

html部分：

<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>

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部分：

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;
}

整体代码：

<!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>

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

御晨风而归i
关注
  • 7
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript案例:表单删除
qq_67192586的博客
03-26 1052
js案例,表单删除
JS table简单添加删除
Dream_Mei_hql的博客
07-24 197
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo1. table案例</title> <style type="text/css"> table,p{ width:1000px; margin: ...
JS案例-动态删除
qq_55930097的博客
07-22 325
实现点击一个删除按钮，该项内容就会被删除的效果。使用了创建元素节点的。点击第一个delete按钮，该行内容被全部删除。//点击一个删除按钮，该项内容就会被删除。//删除该按钮的父节点内容，即li。、在元素节点的末尾追加节点的。、获取某一个节点的父节点的。、获取元素内部HTML的。//把arr内容放进li。
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 345
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
用js制作学生信息表格，并且可以添加/删除行
露露代码历程
08-29 7208
制作一个表格，显示班级的学生信息。 要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;title&gt; new documen...
使用JavaScript进行表格的添加和删除以及编辑
weixin_43191327的博客
10-12 1257
菜鸡前端的第四篇博客,感觉还算不上博客。 请叫我菜鸡,也算是每天对自己的一个总结吧 效果如下: 今天写的是一个表格,实现点击按钮能够添加和删除以及改变相关内容 <script> var users = [{ username: "张三", sex: "男", age: 26, }, ...
JS实现列表的增加和删除功能
热门推荐
wk843620202的专栏
10-09 1万+
JS实现列表的增加和删除功能，需求如下： 输入姓名，email，电话，点击提交，添加到下面的列表中，如下： 这个主要是练习javascript的DOM操作，实现代码如下： 添加用户 添加用户: 姓名:   email:   电话: 提交
form-create 动态生成表单时提交和重置按钮自定义
weixin_38673922的博客
01-25 2008
一、效果图： 二、代码块： <template> <div> <!-- 使用 <form-create></form-create> 标签创建表单 --> <form-create v-model="fApi" :rule="rule" :option="option"></form-create> <!-- 自定义 确定和取消按钮 --> <a-button @click="su
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
以下是如何使用JS实现动态表格的添加、修改和删除功能。 首先，我们需要在HTML页面中设置一个基本的表格结构。例如，给定的代码片段创建了一个表格，包含参数名称、参数编码、参数值和一个操作列。操作列通常用于...
基于React实现表单数据的添加和删除详解
08-31
我们将创建一个简单的Demo，演示如何使用React实现表单数据的添加和删除。 首先，我们需要创建一个React组件。我们可以使用类组件，创建一个React类，继承自React.Component： ``` class ReactDemo extends React....
js删除表单和弹出确认对话框 html 源代码
11-13
js删除表单和弹出确认对话框 html 源代码 获取table的td以及其值，弹出警告框
Vue.js实现的表格增加删除demo示例
10-18
主要介绍了Vue.js实现的表格增加删除demo,结合实例形式分析了vue.js数据绑定及元素增加、删除等相关操作技巧,需要的朋友可以参考下
jQuery实现表单动态添加与删除数据操作示例
10-18
本示例展示了如何使用jQuery来实现表单中的动态添加和删除数据功能，这对于构建交互性较强的用户界面非常有用。以下是对这个示例的详细解释： 首先，HTML部分创建了一个简单的注册表单，包含用户名、密码和邮箱...
jQuery实现用户信息表格的添加和删除功能
10-19
在本文中，我们将深入探讨如何使用jQuery来实现用户信息表格的添加和删除功能。这个功能在许多Web应用程序中都很常见，特别是在数据管理或用户管理的界面中。通过使用jQuery，我们可以简化JavaScript代码，使得交互...
JS————动态表单，动态添加及删除（含注释）
m0_45293340的博客
08-22 915
JS————动态表单，动态添加及删除（含注释）
js动态添加删除表单
wangliutao1的专栏
06-27 1232
html> head> title>动态添加表单元素title> head> script language="javascript"> //以下代码是动态添加表单元素。 var elementCount = 0; //动态增加表单元素。 funct
JS实现表单增加、删除功能，相关代码示范与解析
06-07
好的，下面是一个简单的表单增加、删除功能的代码示范： HTML代码： ```html <form> <div> <label>姓名：</label> <input type="text" name="name[]" required> <button class="add-btn">+</button> <button class="remove-btn">-</button> </div> </form> ``` 解析： - 通过 `name="name[]"`，可以让表单提交时将所有姓名的值作为一个数组提交。 - 增加按钮和删除按钮都放在了每个表单项后面，并且分别用 `add-btn` 和 `remove-btn` 类名进行标识。 - 表单项的外层包裹了一个 `div`，方便后续的增加和删除操作。 JS代码： ```javascript // 获取表单元素和增加、删除按钮 const form = document.querySelector('form'); const addBtns = document.querySelectorAll('.add-btn'); const removeBtns = document.querySelectorAll('.remove-btn'); // 增加按钮的点击事件 addBtns.forEach(addBtn => { addBtn.addEventListener('click', e => { e.preventDefault(); const div = document.createElement('div'); div.innerHTML = ` <label>姓名：</label> <input type="text" name="name[]" required> <button class="add-btn">+</button> <button class="remove-btn">-</button> `; form.insertBefore(div, e.target.parentNode.nextSibling); }); }); // 删除按钮的点击事件 removeBtns.forEach(removeBtn => { removeBtn.addEventListener('click', e => { e.preventDefault(); e.target.parentNode.remove(); }); }); ``` 解析： - 首先通过 `querySelector` 方法获取表单元素和增加、删除按钮。 - 然后分别对增加按钮和删除按钮进行了循环遍历，为它们添加了点击事件。 - 增加按钮的点击事件中，创建了一个新的表单项元素，并插入到当前表单项元素的后面。 - 删除按钮的点击事件中，直接移除当前的表单项元素。 这样就实现了一个简单的表单增加、删除功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值