jQuery实现简单的增加删除修改

最新推荐文章于 2022-09-03 17:21:21 发布

Michael II

最新推荐文章于 2022-09-03 17:21:21 发布

阅读量960

点赞数

分类专栏： jQuery学习文章标签： jQuery实现简单的增删改

本文链接：https://blog.csdn.net/yyxiaobao0726/article/details/88759844

版权

jQuery学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

老师带着做了一个小例子，可实现增加删除数据，勾选删除和全选删除。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(){
					var chk = $("input[type='checkbox'][value='"+ $("#ISBN").val() +"']");//获取已经存在的ISBN的值
					//当前元素
					// 获取父元素 
					//  parent()
					//  parents(选择器)
					//  parentsUntil(选择器)
					// 查找兄弟节点：
					//   next()、nextAll、nextUntil
					//   prev()、prevAll、prevUntil 
					
					if (chk.length !=0 ) {
						//若发现有与“ISBN”值相同的输入，则只改变其输入的“书名”值
						$(chk).parent().next().next().html($("#bookname").val());
					} else {
						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);
					}
					
					
				});
				
				$("#chkall").click(function(){
					//console.log($("#chkall:checked"));
					$("input[name='chkBook']").prop("checked",$(this).prop("checked"));
				})
				
				$("#delAll").click(function(){
					//alert($("input[name='chkBook']:checked").val());
					$("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: 事件委托
				$("# ").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>

部分地方都做好了注释，本人觉得此代码还是有些价值的。若有任何看不懂的地方请在下方评论留言，谢谢。

Michael II

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现简单的增加删除修改

    老师带着做了一个小例子，可实现增加删除数据，勾选删除和全选删除。ISBN值不能重复，当输入相同的ISBN值时，只修改后面的书籍名。效果图如下：    此代码体现的思路清晰明了，代码如下：<!DOCTYPE html><html> <head> <meta ...
复制链接

扫一扫