利用jQuery实现表单里的增加、删除和修改

最新推荐文章于 2024-05-13 18:00:12 发布

胖胖IT

最新推荐文章于 2024-05-13 18:00:12 发布

阅读量6.1k

点赞数 7

分类专栏：关于前端文章标签：增加、删除和修改

本文链接：https://blog.csdn.net/zry2580/article/details/88763376

版权

关于前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这周老师教了怎么利用jQuery实现在表单里增加、删除和修改数据。可以增加数据，单选删除、多选删除和全选删除。ISBN的值式唯一的，不能重复，当输入的ISBN已存在，就只修改后面书名。效果图如下：
在这里插入图片描述
整体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery.min.js"></script>
	</head>
	<body>
		<input type="text" name="ISBN" id="ISBN"/>
		<input type="text" name="bookname" id="bookname"/>
		<button id="add">增加</button>
		<table id="tb1">
			<theader>
				<tr>
					<td><input type="checkbox" name="chkall" id="chkall"></td>
					<td>
						ISBN
					</td>
					<td>
						书名
					</td>
					<td>删除</td>
				</tr>
			</theader>
		</table>
		<button id="delAll">删除</button>
		<script>
			//增加模块
			$(document).ready(function(){
				$("#add").click(function(){
					//设定ISBN为唯一值
					var chk = $("input[type='checkbox'][value='"+ $("#ISBN").val() +"']");
					//如果ISBN为空，就增加一条数据
					if (chk.length == 0 ) {
						var str="<tr>" 
					        + "<td><input type='checkbox' name='chkBook'" 
					       	+  "value='"+$("#ISBN").val()+ "'></td>"
					        + "<td>" + $("#ISBN").val() + "</td>"
					        + "<td>" + $("#bookname").val() + "</td>"
					        //+ "<td><button onclick='delTr(this)'>x</button></td>"
					        + "<td><button data-role='del'>x</button></td>"
						$("#tb1").append(str);
					//如果不为空，就只修改书名
					} else {
						$(chk).parent().next().next().html($("#bookname").val());
					}
				});
				//全选按钮
				$("#chkall").click(function(){
					console.log($("#chkall:checked"));
					$("input[name='chkBook']").prop("checked",$(this).prop("checked"));
				})
				//删除按钮
				$("#delAll").click(function(){
					$("input[name='chkBook']:checked").parents("tr").remove();
				});
				
				//jQuery当中，动态添加的元素，不能直接使用$().on()绑定事件监听器
				/*
				$("#tb1").on("click","button[data-role='del']",function(){
					$(this).parents("tr").remove();
				})*/
				
				//1: jQuery的事件动态绑定
				//2: javaScript的事件流  addEventListener
				//3: 事件委托
				
				//单选删除按钮
				$("#tb1").on("click",function(event){
					console.log(event);
					//var tg =event.target || event.targetSrc;
					if (event.target.getAttribute("data-role") == "del") {
						$(event.target).parents("tr").remove();
					}
				})
				
			})
			/*
			function delTr(obj) {
					$(obj).parents("tr").remove();
				}
				*/
		</script>
	</body>
</html>

在增加模块中，设置ISBN为唯一的值，是利用选择框和ISBN这个字段绑定在一起，实现ISBN的唯一

var chk = $("input[type='checkbox'][value='"+ $("#ISBN").val() +"']");

当ISBN存在的时候，只修改书名字段，就是先找到chk的“父亲”，然后找到他的兄弟的兄弟，也就是ID为bookname的字段，修改书名的value值
//当前元素
// 获取父元素
// parent()
// parents(选择器)
// parentsUntil(选择器)
// 查找兄弟节点：
// next()、nextAll、nextUntil
// prev()、prevAll、prevUntil

$(chk).parent().next().next().html($("#bookname").val());

全选按钮，选定name值等于chkBook的整个选择框，后面的prop这个属性里面有两个参数，第一个参数是获取，第二个参数设置，首先第一个参数先获取整行，然后第二个参数设置成成全选，可以根据下面的全选框来改变是否全选，下方的选择删除按钮同理

$("#chkall").click(function(){
					console.log($("#chkall:checked"));
					$("input[name='chkBook']").prop("checked",$(this).prop("checked"));
				})

利用jQuery的事件动态绑定来时候单行的删除，把envent的target属性来获取参数实现删除功能，event.target 属性返回 DOM 元素触发了事件。

$("#tb1").on("click",function(event){
					console.log(event);
					if (event.target.getAttribute("data-role") == "del") {
						$(event.target).parents("tr").remove();
					}
				})

本人也是初学者，如果本文中有什么错误，也请大家多多指教，如果对于文中有什么不理解的，也可以在本文下方留言，我为你们解答，谢谢！

胖胖IT

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
3
评论
利用jQuery实现表单里的增加、删除和修改

这周老师教了怎么利用jQuery实现在表单里增加、删除和修改数据。可以增加数据，单选删除、多选删除和全选删除。ISBN的值式唯一的，不能重复，当输入的ISBN已存在，就只修改后面书名。效果图如下：整体代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫