jQuery增删改查

jQuery增删改查（图书管理）

演示效果：

jQuery增删改查

HTML代码：

<div class="books">
	<h3 class="titl">图书管理</h3>
	<table cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th><input type="checkbox" id="all" /></th>
				<th>作者</th>
				<th>作品</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="list">
			<tr id="tr">
				<td><input type="checkbox"/></td>
				<td class="name">三毛</td>
				<td class="work">《说给自己听》</td>
				<td><a href="javascript:;" class="more">修改</a></td>
			</tr>
			<tr id="tr">
				<td><input type="checkbox"/></td>
				<td class="name">张嘉佳</td>
				<td class="work">《从你的全世界路过》</td>
				<td><a href="javascript:;" class="more">修改</a></td>
			</tr>
			<tr id="tr">
				<td><input type="checkbox"/></td>
				<td class="name">张嘉佳</td>
				<td class="work">《云边有个小卖部》</td>
				<td><a href="javascript:;" class="more">修改</a></td>
			</tr>
			<tr id="tr">
				<td><input type="checkbox"/></td>
				<td class="name">余华</td>
				<td class="work">《活着》</td>
				<td><a href="javascript:;" class="more">修改</a></td>
			</tr>
			<tr id="tr">
				<td><input type="checkbox"/></td>
				<td class="name">李诞</td>
				<td class="work">《笑场》</td>
				<td><a href="javascript:;" class="more">修改</a></td>
			</tr>
		</tbody>
	</table>
	<div class="notfund" id="notfund">你查找的内容不存在，请重新输入！</div>
	<div class="butcz">
		<a href="javascript:;" class="bookbtn" id="delete">删除</a>
		<a href="javascript:;" class="bookbtn" id="add">添加</a>
		<a href="javascript:;" class="bookbtn" id="search">查找</a>
		<a href="javascript:;" class="bookbtn" id="lookall">查看全部</a>
	</div>
</div>

<!-- 弹窗 -->
<div class="bookmask">
	<!-- add -->
	<div class="addmin maskmin">
		<div>
			<h3 class="top-tl">添加书籍</h3>
			<label class="takeauthor">
				<p>作者：</p>
				<input type="text" class="addauthor" />
				<span>请输入作者名</span>
			</label>
			<label class="takework">
				<p>作品：</p>
				<input type="text" class="addwork" />
				<span>请输入作品</span>
			</label>
			<button class="bookbtn" id="addnow">添加</button>
		</div>
	</div>
	<!-- search -->
	<div class="searchmin maskmin">
		<div>
			<h3 class="top-tl">查找书籍</h3>
			<p class="s-ts">请输入要查找的作者或作品</p>
			<input type="text" class="searinput" placeholder="例:张嘉佳" />
			<span class="searerr">请输入你要查找的内容</span>
			<button class="bookbtn" id="searchnow">查找</button>
		</div>
	</div>
	<!-- change -->
	<div class="changemin maskmin">
		<div>
			<h3 class="top-tl">内容修改</h3>
			<label class="takeauthor">
				<p>作者：</p>
				<input type="text" class="changeAuthor" />
				<span>请输入作者名</span>
			</label>
			<label class="takework">
				<p>作品：</p>
				<input type="text" class="changeWork" />
				<span>请输入作品</span>
			</label>
			<button class="bookbtn" id="changenow">修改</button>
		</div>
	</div>
</div>

css样式：

.books{width: 800px;margin: 200px auto 0;box-sizing: border-box;position: relative;z-index: 0;}
.books .titl{font-size: 30px;color: #09c;text-align: center;margin-bottom: 30px;box-sizing: border-box;}
.books table{border: 1px solid #DDDDDD;width: 100%;border-collapse: collapse;}
.books table thead{width: 100%;background-color: #09c;}
.books table thead th{border-right: 1px solid #DDDDDD;height: 50px;font-size: 16px;color: #FFFFFF;}
.books table thead th:last-child{border: none;}
.books table tbody{width: 100%;}
.books table tbody tr{width: 100%;height: 40px;border-bottom: 1px solid #DDDDDD;}
.books table tbody tr td{border-right: 1px solid #DDDDDD;text-align: center;}
.books table tbody tr:nth-of-type(even){background-color: #EEEEEE;}
.books table tbody tr td .more{width: 60px;height: 24px;text-align: center;margin: auto;line-height: 24px;}
/* butcz */
.butcz{width: 100%;box-sizing: border-box;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;margin-top: 20px;}
.bookbtn{width: 120px;height: 34px;line-height: 34px;border-radius: 4px;border: 1px solid #0099CC;font-size: 14px;color: #FFFFFF;background-color: #0099CC;margin-right: 20px;text-align: center;position: relative;z-index: 0;overflow: hidden;display: block;}
.butcz .bookbtn:last-child{margin-right: 0;}
.bookbtn:before{content: '';display: block;width: 0%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);background-color: #FFFFFF;z-index: -1;transition: all .3s;}
.bookbtn:hover:before{width: 100%;}
.bookbtn:hover{color: #0099CC;}

/* bookmask */
.bookmask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;box-sizing: border-box;overflow: hidden;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;background-color: rgba(0,0,0,0.8);transition: all .4s ease-in-out;opacity: 0;visibility: hidden;z-index: 2;}
.bookmask.on{opacity: 1;visibility: visible;}
/* addmin */
.maskmin{width: 40vw;height: auto;box-sizing: border-box;padding: 100px;background-color: #FFFFFF;display: none;}
.maskmin .top-tl{text-align: center;font-size: 30px;color: #0099CC;margin-bottom: 40px;}
.maskmin label{width: 100%;box-sizing: border-box;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;margin-bottom: 20px;-webkit-justify-content: space-between;justify-content: space-between;position: relative;}
.maskmin label:last-child{margin-bottom: 0;}
.maskmin label input{width: calc(100% - 50px);border: 1px solid #DDDDDD;outline: none;font-size: 14px;padding: 0 10px;box-sizing: border-box;height: 40px;}
.maskmin label p{font-size: 16px;color: #333;}
.maskmin label span{position: absolute;top: 50%;right: 10px;font-size: 12px;color: #f00;opacity: 0;visibility: hidden;margin-top: -6px;}
.maskmin label span.err{visibility: visible;opacity: 1;}
.maskmin .bookbtn{margin: 30px auto 0;}
/* searchmin */
.maskmin .s-ts{font-size: 16px;color: #333333;margin-bottom: 20px;}
.maskmin .searinput{width: 100%;height: 40px;border: 1px solid #DDDDDD;outline: none;font-size: 14px;padding: 0 10px;box-sizing: border-box;}
.maskmin span{font-size: 12px;color: #f00;margin-top: 10px;display: block;opacity: 0;visibility: hidden;}
.maskmin span.err{opacity: 1;visibility: visible;}
/* notfund */
.notfund{width: 100%;text-align: center;line-height: 80px;font-size: 24px;color: #FF0000;display: none;}

jQuery分段代码（一定要先引入jQuery）
1.删除

// 删
$("#delete").click(function() {
	var nlenght=$("#list input:checked").length;//获取选中的input长度
	if(nlenght==0){//判断是否选中元素
		alert("你没有选择任何内容！");//没选中弹出提示框
	}else{//选中后执行下面代码
		$("#list input:checked").each(function() { // 遍历选中的checkbox
			n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
			$("#list").find("tr:eq("+n+")").remove();//删除选中元素
			$("#all").prop("checked",false);//全选删除后复选框取消选中状态
		});
	}
	console.log(nlenght)//后台测试打印
});

2.添加

//点击弹出添加框(addmin)
$("#add").click(function(e){
	e?e.stopPropagation():event.cancelBubble = true;
	$(".bookmask").addClass("on");
	$(".addmin").fadeIn().siblings().hide();
});
//点击(maskmin)之外的地方(bookmask)隐藏
$(document).mousedown(function(e) {
	var clenght=$(e.target).parents(".bookmask").length;
	if (clenght == 0) {
		$(".bookmask").removeClass("on"); 
	}
	// console.log(clenght);
	//取消输入提示
	$(".takeauthor").find("span").removeClass("err");
	$(".takework").find("span").removeClass("err");
});

// 点击添加
$("#addnow").click(function(){
	// 获取输入框的值
	var checkbox='<input type="checkbox"/>';
	var author=$(".addauthor").val();
	var work=$(".addwork").val();
	var change='<a href="javascript:;" class="more">修改</a>'
	var str="<tr id='tr'><td>"+checkbox+"</td><td class='name'>"+author+"</td><td class='work'>"+"《"+work+"》"+"</td><td>"+change+"</td></tr>"
	// 获取输入框的输入值长度
	var authorl=author.length;
	var workl=work.length;
	// console.log(authorl);
	
	// 焦点事件(用于判断是否输入插值并给予提示)
	$(".maskmin label input").focus(function(){
		$(this).siblings("span").removeClass("err");
	});
	$(".maskmin label input").blur(function(){
		var blurnow=$(this).val();
		if(blurnow == ""){
			$(this).siblings("span").addClass("err")
		}
	});
	
	// 非空判断
	if(authorl =="" && workl ==""){
		$(".takeauthor").find("span").addClass("err");
		$(".takework").find("span").addClass("err");
	}else if(authorl ==""){
		$(".takeauthor").find("span").addClass("err");
	}else if(workl ==""){
		$(".takework").find("span").addClass("err");
	}else{
			// 插入书籍
			$("#list").append(str);
			//关闭弹窗
			$(".bookmask").removeClass("on");
			//清空输入框
			$(".addauthor").val("");
			$(".addwork").val("");
		
		$(".takeauthor").find("span").removeClass("err");
		$(".takework").find("span").removeClass("err");
	};
	var trlenght=$("#list tr").length;
	console.log("tr"+trlenght)
})

3.查找

//点击弹出查找输入框(searchmin)
$("#search").click(function(e){
	e?e.stopPropagation():event.cancelBubble = true;
	$(".bookmask").addClass("on");
	$(".searchmin").fadeIn().siblings().hide();
});
// 查找与显示
$(".searinput").blur(function(){
	var blur02now=$(this).val();//获取输入值
	if(blur02now == ""){
		$(this).siblings(".searerr").addClass("err")
	}else if($.trim(blur02now) != ""){
		$("#list tr").hide().filter(":contains('"+blur02now+"')").show();
	}
	console.log("你搜索的值"+"----"+blur02now)
})
// 查找显示判断
//:contains 选择器选取包含指定字符串的元素。
//该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
//filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
$("#searchnow").click(function(){
	var searinput=$(".searinput").val();//获取输入值
	var searinputl=searinput.length;//获取用户输入内容长度
	var trl=$('#list tr').filter(function() {
		return $(this).css('display') !== 'none';
	}).length;//判断显示数量
	// 用户查找错误提示
	if(trl <= 0){
		$("#notfund").fadeIn();
	}else{
		$("#notfund").hide();
	}
	console.log("显示数量"+trl);
	//聚焦输入框提示消失
	$(".searinput").focus(function(){
		$(".searerr").removeClass("err");
	});
	//非空判断
	if(searinputl == ""){
		$(".searerr").addClass("err");
	}else{
		$(".searerr").removeClass("err");
		//关闭弹窗
		$(".bookmask").removeClass("on");
		// 清空输入框
		$(".searinput").val("");
	}
	
})
// 查看全部
$("#lookall").click(function(){
	$("#list tr").fadeIn();
})

4.修改

// 修改
var row=0;
//注：此方法在动态添加后点击失效(推测上面这个监听函数，是在网页加载的时候就指定了对象,而通过代码追加，如通过js追加的元素，是不能匹配这个事件的。)
//$("tr td .more").click(function(e){})
$(document).on('click','tr td .more',function(e){
	e?e.stopPropagation():event.cancelBubble = true;
	$(".bookmask").addClass("on");
	$(".changemin").fadeIn().siblings().hide();
	//获取初始值
	var nowName=$(this).parents().siblings(".name").text();
	var nowWork=$(this).parents().siblings(".work").text();
	//修改后的值
	var changeName=$(".changeAuthor").val(nowName);
	var changeWork=$(".changeWork").val(nowWork);
	console.log("你选择的是"+nowName+"的"+nowWork);
	var _this=$(this).parent();
	var i=$('#list').find("tr").index(_this.parent()[0]);//获取选中的tr下标
	console.log("行"+i);
	row=i;
	
	$("#changenow").click(function(){
		//获取修改后的值
		var changeName=$(".changeAuthor").val();
		var changeWork=$(".changeWork").val();
		//修改后的值替换初始值
		$("#list tr").eq(row).find(".name").text(changeName);
		$("#list tr").eq(row).find(".work").text(changeWork);
		
		//关闭弹窗
		$(".bookmask").removeClass("on");
		console.log("修改的内容"+changeName+"和"+changeWork+"行"+row);
	})
	
})