<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.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() +"']"); //选取底下已经存在的值，如果底下没有就为空，然后执行else下的添加，如果底下有就执行chk.length!=0的操作 //当前元素 // 获取父元素  // parent() // parents(选择器) // parentsUntil(选择器) // 查找兄弟节点： // next()、nextAll、nextUntil // prev()、prevAll、prevUntil  if (chk.length !=0 ) { /*如果节点的长度不为0也就是存在 ISBN与输入框中的值一样时， *就把输入框中的值赋给添加的书名。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(){ $("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); console.log() //var tg =event.target || event.targetSrc; if (event.target.getAttribute("data-role") == "del") {//传递event的事件，事件中的target的属性是最底层的 $(event.target).parents("tr").remove(); } }) }) function delTr(obj) {//对应click的点击事件，对指定的节点删除 $(obj).parents("tr").remove(); } </script>
	</body>
</html>