| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> jQuery实现的增删改查 -> 正文阅读 |
|
|
[JavaScript知识库]jQuery实现的增删改查 |
|
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<meta?http-equiv="X-UA-Compatible"?content="IE=edge"> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"> ????<title>Document</title> ????<script?src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script> ? ?? <style> ????????body?{ ????????margin:?0; ????????padding:?0; ????????} ????????.container?{ ????????margin:?0; ????????padding:?0; ????????display:?flex; ????????flex-direction:?row; ????????flex:?1; ????????flex-basis:?auto; ????????box-sizing:?border-box; ????????min-width:?0; ????????width:?100%; ????????height:?900px; ????????border:?1px?solid; ????????color:?#fff; ????????} ????????.container?.right?{ ????????display:?flex; ????????flex-direction:?column; ????????flex:?1; ????????flex-basis:?auto; ????????box-sizing:?border-box; ????????padding:?0; ????????margin:?0; ????????width:?100%; ????????} ????????/*?头部?*/ ????????.head?{ ????????width:?100%; ????????height:?60px; ????????background-color:?#3d3d3c; ????????position:?relative; ????????} ????????.head?.icon{ ????????position:?absolute; ????????top:?13px; ????????right:?845px; ????????font-size:?23px; ????????} ????????/*?中间部分?*/ ????????.container?.right?.main?{ ????????flex:?1; ????????flex-basis:?auto; ????????/*?padding:?50px?0px?0px?200px;?*/ ????????box-sizing:?border-box; ????????overflow:?hidden; ????????color:?#2c3e50; ????????width:?100%; ????????height:?100%; ????????position:?absolute; ????????top:?100px; ????????left:?200px; ????????margin:?auto; ????????} ????????.container?.right?.main?.findAdd{ ????????min-width:?500px; ????????margin-left:?30px; ????????} ????????.container?.right?.main?.findAdd?input{ ????????height:?25px; ????????outline:?none; ????????} ????????.container?.right?.main?.findAdd?button{ ????????height:?25px; ????????} ????????/*?内容表格?*/ ????????.container?.right?.main?.table{ ????????width:?1250px; ????????} ????????ul?{ ????????list-style:?none; ???????? ????????} ????????.thead?{ ????????width:?1200px; ????????margin:?20px?auto?0?auto; ????????} ????????.tbody?{ ????????width:?1200px; ????????margin:?0?auto; ????????} ????????.thead?ul, ????????.tbody?ul?{ ????????height:?50px; ????????/*?width:?100%;?*/ ????????width:?1062px; ????????margin:?3px; ????????padding:?0; ???????? ????????} ????????.thead?ul?li?{ ????????width:?199px; ????????float:?left; ????????text-align:?center; ????????height:?50px; ????????line-height:?50px; ????????/*?font-weight:?bold;?*/ ????????border:?1px?solid; ????????}
????????.tbody?ul?li?{ ????????float:?left; ????????width:?200px; ????????text-align:?center; ????????height:?50px; ????????line-height:?50px; ????????border:?1px?solid; ????????} ????????.thead?ul?li:first-of-type, ????????.tbody?ul?li:first-of-type?{ ????????width:?55px; ????????} ????????/*?去掉所有tbody的上边框?*/ ????????.tbody?ul?li?{ ????????border-top:?none; ????????} ????????/*?除了最后一个li其他都去掉右边边框?*/ ????????.tbody?ul?li:not(:last-child)?{ ????????border-right:?none; ????????} ????????.tbody?ul?li?span?{ ????????margin:?0?10px; ????????border:?1px?solid?#ccc; ????????padding:?5px?10px; ????????font-size:?12px; ????????} ????????.tbody?ul?li?.del{ ????????color:?#fff; ????????background:?#f56c6c; ????????} ????????.tbody?ul:nth-of-type(odd)?{ ????????background-color:?#f5f5f5; ????????} ????????/*?.tbody?ul:hover{ ????????background-color:?aquamarine; ????????}?*/ ????????.tbody?ul?li:hover{ ????????cursor:?pointer; ????????} ????????.pop{ ????????width:?400px; ????????height:?300px; ????????border:?1px?solid?#ccc; ????????position:?absolute; ????????left:?0; ????????top:?0; ????????right:?0; ????????bottom:?0; ????????margin:?auto; ????????z-index:?2; ????????background-color:?#fff; ????????display:?none; ????????} ????????.pop?h2{ ????????text-align:?center; ????????font-weight:?bold; ????????font-size:?20px; ????????/*?background-color:#74e6ba;?*/ ????????line-height:?40px; ????????} ????????.pop?div{ ????????margin:?10px?10px; ????????font-size:?20px; ????????text-align:?center; ????????padding:?10px; ????????} ????????.pop?div?input{ ????????padding:?5px; ????????outline:?none; ????????border:?1px?solid?#ccc; ????????border-radius:?3px; ????????} ????????/*?.pop?div?input:focus{ ????????border:?1px?solid?rgb(77,?219,?177); ????????}?*/ ????????/*?.pop?button:nth-child(4){ ????????position:?absolute; ????????bottom:?15px; ????????left:?250px; ????????padding:?0px?5px; ????????}?*/ ????????.pop?button:nth-child(5){ ????????position:?absolute; ????????/*?bottom:?11px;?*/ ????????left:?300px; ????????/*?padding:?0px?5px;?*/ ????????} ????????.pop?button:nth-child(6){ ????????margin-left:?240px; ????????/*?margin-top:?11px;?*/ ????????padding:?0?5px; ????????} ????</style> </head> <body> ????<div?class="container"> ????????<div?class="right"> ????????????<!--?头部?--> ????????????<div?class="head"> ????????????????<div?class="icon">后台管理系统</div> ????????????</div> ????????????<!--?中间部分?--> ????????????<div?class="main"> ????????????????<!--?首页标题?--> ????????????????<div?class="nav"></div> ????????????????<!--?搜索?添加框?--> ????????????????<div?class="findAdd"> ????????????????????<input?type="text"?placeholder="输入部门名称查找"> ????????????????????<input?type="text"?placeholder="输入部门代码查找"> ????????????????????<button>搜索</button> ????????????????????<!--?<input?type="text"?placeholder="输入部门名称查找">?--> ????????????????????<button>添加</button> ????????????????</div> ????????????????<!--?内容表格?--> ????????????????<div?class="table"> ????????????????????<div?class="thead"> ????????????????????????<ul> ????????????????????????????<li> ????????????????????????????????<input?type="checkbox"> ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????部门名称 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????部门代码 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????修改时间 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????修改人 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????操作 ????????????????????????????</li> ????????????????????????</ul> ????????????????????</div> ????????????????????<div?class="tbody"> ????????????????????????<ul> ????????????????????????????<li> ????????????????????????????????<input?type="checkbox"> ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????优酷 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????01 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????2021-06-13?10:40:29 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????张三 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????<span?class="add">编辑</span> ????????????????????????????????<span?class="del">删除</span> ????????????????????????????</li> ????????????????????????</ul> ????????????????????????<ul> ????????????????????????????<li> ????????????????????????????????<input?type="checkbox"> ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????腾讯 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????02 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????2021-04-02?05:40:29 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????赵四 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????<span?class="add">编辑</span> ????????????????????????????????<span?class="del">删除</span> ????????????????????????????</li> ????????????????????????</ul> ????????????????????????<ul> ????????????????????????????<li> ????????????????????????????????<input?type="checkbox"> ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????芒果 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????03 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????2020-06-11?20:40:29 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????王五 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????<span?class="add">编辑</span> ????????????????????????????????<span?class="del">删除</span> ????????????????????????????</li> ????????????????????????</ul> ????????????????????????<ul> ????????????????????????????<li> ????????????????????????????????<input?type="checkbox"> ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????爱奇艺 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????04 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????2019-12-17?11:40:29 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????大乔 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????<span?class="add">编辑</span> ????????????????????????????????<span?class="del">删除</span> ????????????????????????????</li> ????????????????????????</ul> ????????????????????????<ul> ????????????????????????????<li> ????????????????????????????????<input?type="checkbox"> ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????乐视 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????05 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????2018-10-11?10:40:29 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????小乔 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????<span?class="add">编辑</span> ????????????????????????????????<span?class="del">删除</span> ????????????????????????????</li> ????????????????????????</ul> ????????????????????????<ul> ????????????????????????????<li> ????????????????????????????????<input?type="checkbox"> ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????搜狐 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????06 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????2018-08-17?20:40:29 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????孙策 ????????????????????????????</li> ????????????????????????????<li> ????????????????????????????????<span?class="add">编辑</span> ????????????????????????????????<span?class="del">删除</span> ????????????????????????????</li> ????????????????????????</ul> ????????????????????</div> ????????????????</div> ????????????</div> ????????</div> ????</div> ????<div?class="pop"> ????????<h2>请输入修改后的值</h2> ????????<div>部门名称：<input?type="text"></div> ????????<div>部门代码：<input?type="text"></div> ????????<div>修改人：<input?type="text"?style="margin-left:?20px;"></div> ????????<button>确认</button> ????????<button>取消</button> ????</div> ????<script> ???????? ????????//?1.?全选? ????????$('input[type="checkbox"]').eq(0).click(function?()?{ ????????????$('input[type="checkbox"]').prop('checked')???$('input[type="checkbox"]').prop('checked',?true)?:?$( ????????????????'input[type="checkbox"]').prop('checked',?false) ????????}); ????????$('.tbody?input[type="checkbox"]').click(function?()?{ ????????????var?flag?=?true; ????????????$('.tbody?input[type="checkbox"]').each((index,?item)?=>?{ ????????????????if?(!$(item).prop('checked'))?{ ????????????????????flag?=?false; ????????????????} ????????????}) ????????????$('input[type="checkbox"]').eq(0).prop('checked',?flag) ????????})
????????//?2.?编辑 ????????var?bg?=?function?()?{ ????????????$('.add').click(function?(e)?{ ????????????????$(".pop").css("display",?"block"); ????????????????//?获取元素的标签内容 ????????????????$('.pop?input').eq(0).val(''); ????????????????$('.pop?input').eq(1).val(''); ????????????????$('.pop?input').eq(2).val(''); ????????????????$('button').eq(2).off('click') ????????????????$('button').eq(2).click(()?=>?{ ????????????????????$(".pop").css("display",?"none"); ????????????????????$(e.target).parent().parent().find("li").eq(1).text($('.pop?input').eq(0).val()) ????????????????????????.next() ????????????????????????.next().html(nowTime()); ????????????????????$(e.target).parent().parent().find("li").eq(1).text($('.pop?input').eq(0).val()) ????????????????????????.next() ????????????????????????.text($('.pop?input').eq(1).val()).next().next().text($('.pop?input').eq(2).val()) ????????????????}); ????????????????$('button').eq(3).click(()?=>?{ ????????????????????$(".pop").css("display",?"none"); ????????????????}); ????????????}); ????????} ????????//?函数封装调用?--?编辑 ????????bg(); ????????//?获取当前时间 ????????function?nowTime()?{ ????????????var?time?=?new?Date(); ????????????var?year?=?time.getFullYear(); ????????????var?month?=?time.getMonth()?+?1; ????????????var?date?=?time.getDate(); ????????????var?hour?=?time.getHours(); ????????????var?minute?=?time.getMinutes(); ????????????var?second?=?time.getSeconds(); ????????????return?`${year}-${standard(month)}-${standard(date)}?${standard(hour)}:${standard(minute)}:${standard(second)}`; ????????} ????????//?判断 ????????function?standard(time)?{ ????????????return?time?<?10???'0'?+?time?:?time; ????????}
????????//?3.?删除 ?????????var?Del?=?function(){ ?????????$('.del').click(function?(e)?{ ????????????????if?($(e.target).is('span'))?{ ????????????????????$(e.target).parents('ul').remove(); ????????????????} ????????????}); ????????} ????????Del();
????????//?4.?搜索 ????????var?newData?=?[] ????????$("button").eq(0).click(function?()?{ ????????????var?arr?=?$('.tbody?ul') ????????????console.log(arr.length); ????????????if?(!$("?input[type='text']").eq(0).val()?==?"")?{ ????????????????for?(var?i?=?0;?i?<?arr.length;?i++)?{ ????????????????????if?($("?input[type='text']").eq(0).val()?==?$(".tbody").find("ul").eq(i).find("li")[1] ????????????????????????.innerText)?{ ????????????????????????newData.push($(".tbody").find("ul").eq(i).find("li")[1].innerText) ????????????????????????newData.push($(".tbody").find("ul").eq(i).find("li")[2].innerText) ????????????????????} ????????????????} ????????????????console.log(newData) ????????????????//?把查询结果输出到tbody中 ????????????????for?(var?j?=?0;?j?<?newData.length;?j++)?{ ????????????????????$(".tbody").html(` ????????????????<ul> ????????????????????<li> ????????????????????????<input?type="checkbox"> ????????????????????</li> ????????????????????<li?class="dName">${newData[0]}</li> ????????????????????<li?class="id">${newData[1]}</li> ????????????????????<li?class="time">${nowTime()}</li> ????????????????????<li></li> ????????????????????<li> ????????????????????????<span?class="add">编辑</span> ????????????????????????<span?class="del">删除</span> ????????????????????</li> ????????????????</ul> ????????????`) ????????????????} ????????????}?else?{ ????????????????alert("请输入数据查询") ????????????} ????????????//?函数封装调用?--?删除 ????????????Del(); ???????????? ????????????//?函数封装调用?--?编辑 ????????????bg(); ????????})
????????//?5.?添加 ????????$('button').eq(1).click(function?()?{ ????????????var?time?=?new?Date(); ????????????var?year?=?time.getFullYear(); ????????????var?month?=?time.getMonth()?+?1; ????????????var?date?=?time.getDate(); ????????????var?hour?=?time.getHours(); ????????????var?minute?=?time.getMinutes(); ????????????var?second?=?time.getSeconds(); ????????????//初始化数据?进来赋值为空 ????????????$("?input[type='text']").eq(2).val(""); ????????????$("?input[type='text']").eq(3).val(""); ????????????$("?input[type='text']").eq(4).val(""); ????????????function?standard(time)?{ ????????????????return?time?<?10???'0'?+?time?:?time; ????????????} ????????????var?newTime?= ????????????????`${year}-${standard(month)}-${standard(date)}?${standard(hour)}:${standard(minute)}:${standard(second)}`; ????????????//?console.log(newTime); ????????????$(".pop").css("display",?"block") ????????????$('button').eq(2).off('click') ????????????$("button").eq(2).click(function?()?{ ????????????????$(".pop").css("display",?"none"); ????????????????var?txt1?=?$("?input[type='text']").eq(2).val(); ????????????????var?txt2?=?$("?input[type='text']").eq(3).val(); ????????????????var?txt3?=?$("?input[type='text']").eq(4).val(); ????????????????//?var?time1?=?new?Date() ????????????????//?gettime(time1) ????????????????$(".tbody").append(` ????????????<ul> ????????????????????<li> ????????????????????????<input?type="checkbox"> ????????????????????</li> ????????????????????<li> ????????????????????????${txt1} ????????????????????</li> ????????????????????<li> ????????????????????????${txt2} ????????????????????</li> ????????????????????<li> ???????????????????????${newTime} ????????????????????</li> ????????????????????<li> ????????????????????????${txt3} ????????????????????</li> ????????????????????<li> ????????????????????????<span?class="add">编辑</span> ????????????????????????<span?class="del">删除</span> ????????????????????</li> ????????????????</ul> ????????????`) ????????????????//?函数封装调用?--?删除 ????????????????Del(); ??????????????? ????????????????//?函数封装调用?--?编辑 ????????????????bg(); ????????????}) ???????????? ????????????$('button').eq(3).click(function?()?{ ????????????????$(".pop").css("display",?"none"); ????????????})
????????}) ????</script> </body> </html> |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 | -2024/5/18 21:39:32- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |