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"><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><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><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() { // 遍历选中的checkboxn = $(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='';var author=$(".addauthor").val();var work=$(".addwork").val();var change='修改'var str=""+checkbox+" "+author+" "+"《"+work+"》"+" "+change+" 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);})})
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！