| |
|
|
开发:
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> ????????.one?{ ????????????width:?1300px; ????????????height:?600px; ????????????margin:?0?auto; ????????} ????????ul?li?{ ????????????list-style:?none; ????????????float:?left; ????????????font-size:?18px; ????????????width:?190px; ????????????height:?70px; ????????????margin:?0; ????????????border:?1px?solid; ????????????text-align:?center; ????????????line-height:?70px; ????????} ????????ul?{ ????????????width:?1154px; ????????????height:?72px; ????????????box-sizing:?border-box; ????????????margin:?0; ????????????padding:?0; ????????} ????????ul:nth-child(2n)?{ ????????????background-color:?powderblue; ????????} ????????.one?ul:nth-child(5)?{ ????????????margin-top:?40px; ????????} ????????.add?{ ????????????width:?300px; ????????????height:?200px; ????????????border:?1px?solid; ????????????text-align:?center; ????????????display:?none; ????????????position:?fixed; ????????????left:?0; ????????????top:?0; ????????????background-color:?hotpink; ????????} ????????.add?input?{ ????????????display:?inline-block; ????????????width:?150px; ????????????height:?30px; ????????????margin-top:?20px; ????????} ????????.add?button?{ ????????????width:?140px; ????????????height:?30px; ????????????margin-top:?20px; ????????} ????????.tp?{ ????????????display:?none; ????????} ????????.live, ????????.die?{ ????????????background-color:?pink; ????????} ????</style> </head> <body> ????<ul?class="tp"> ????????<li>?<input?type="checkbox"></li> ????????<li></li> ????????<li></li> ????????<li>2018-05-15?09:59:25</li> ????????<li></li> ????????<li> ????????????<button?class="live">编辑</button> ????????????<button?class="die">删除</button> ????????</li> ????</ul> ????<div?class="one"> ????????<input?type="text"?id="department"> ????????<input?type="text"?id="code"> ????????<button>搜索</button> ????????<button>添加</button> ????????<ul> ????????????<li> ????????????????<input?type="checkbox"?class="uncheck"> ????????????</li> ????????????<li> ????????????????部门名称 ????????????</li> ????????????<li> ????????????????部门代码 ????????????</li> ????????????<li> ????????????????修改时间 ????????????</li> ????????????<li> ????????????????修改人 ????????????</li> ????????????<li> ????????????????操作 ????????????</li> ????????</ul> ????????<ul> ????????????<li>?<input?type="checkbox"></li> ????????????<li>1</li> ????????????<li>11</li> ????????????<li>2018-05-15?09:59:25</li> ????????????<li></li> ????????????<li> ????????????????<button?class="live">编辑</button> ????????????????<button?class="die">删除</button> ????????????</li> ????????</ul> ????????<ul> ????????????<li>?<input?type="checkbox"></li> ????????????<li>1</li> ????????????<li>11</li> ????????????<li>2018-05-15?09:59:25</li> ????????????<li></li> ????????????<li> ????????????????<button?class="live">编辑</button> ????????????????<button?class="die">删除</button> ????????????</li> ????????</ul> ????????<ul> ????????????<li>?<input?type="checkbox"></li> ????????????<li>2</li> ????????????<li>11</li> ????????????<li>2018-05-15?09:59:25</li> ????????????<li></li> ????????????<li> ????????????????<button?class="live">编辑</button> ????????????????<button?class="die">删除</button> ????????????</li> ????????</ul> ????????<ul> ????????????<li>?<input?type="checkbox"></li> ????????????<li>3</li> ????????????<li>11</li> ????????????<li>2018-05-15?09:59:25</li> ????????????<li></li> ????????????<li> ????????????????<button?class="live">编辑</button> ????????????????<button?class="die">删除</button> ????????????</li> ????????</ul> ????????<ul> ????????????<li>?<input?type="checkbox"></li> ????????????<li>4</li> ????????????<li>11</li> ????????????<li>2018-05-15?09:59:25</li> ????????????<li></li> ????????????<li> ????????????????<button?class="live">编辑</button> ????????????????<button?class="die">删除</button> ????????????</li> ????????</ul> ????</div> ????<!--?/*?添加框?*/?--> ????<div?class="add"> ????????<input?type="text"?placeholder="输入你的部门名称"> ????????<input?type="text"?placeholder="输入你的部门代码"> ????????<button>确定</button> ????????<button>取消</button> ????</div> ????<script> ????????//?全选框 ????????$('input[type="checkbox"]').eq(1).click(function?()?{ ????????????if?($(this).prop("checked"))?{ ????????????????$('ul?input').prop('checked',?true) ????????????}?else?{ ????????????????$("ul?input").prop('checked',?false) ????????????} ????????}) ????????//?全选框删除 ????????function?delete1()?{ ????????????$(".die").click(function?()?{ ????????????????$(this).parents('ul').remove(); ????????????}) ????????} ????????delete1(); ????????//?添加 ????????$('.one?button').eq(1).click(function?()?{ ????????????$(".add").css('display',?'block') ????????????$('.add?button').eq(0).off('click') ????????????$('.add?button').eq(0).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(); ????????????????function?standard(time)?{ ????????????????????return?time?<?10???'0'?+?time?:?time; ????????????????} ????????????????var?newTime?=?`${year}-${standard(month)}-${standard(date)}?${standard(hour)}:${standard(minute)}:${standard(second)}`; ????????????????var?dom3?=?[{ ????????????????????name:?$('.add?input').eq(0).val(), ????????????????????num:?$('.add?input').eq(1).val() ????????????????}] ????????????????dom3.forEach(function?(e,?index)?{ ????????????????????var?cloneDom3?=?$('.tp').clone(true).removeClass("tp"); ????????????????????cloneDom3.find('li').eq(1).text(e.name).next().text(e.num).next().text(newTime) ????????????????????cloneDom3.appendTo($('.one')); ????????????????}) ????????????????console.log(2); ????????????????//?点击确定后清空原本数据 ????????????????$('.add?input').eq(0).val(""); ????????????????$('.add?input').eq(1).val(""); ????????????????$(".add").css('display',?'none') ????????????}) ????????????//?点击取消后清空原本数据 ????????????$('.add?button').eq(1).click(function?()?{ ????????????????$(".add").css('display',?'none') ????????????????$('.add?input').eq(0).val(""); ????????????????$('.add?input').eq(1).val(""); ????????????}) ????????}) ????????//?编辑 ????????function?liveFn()?{ ????????????$('.live').click(function?(e)?{ ????????????????$(".add").css('display',?'block') ????????????????$('.add?button').eq(0).off('click') ????????????????$('.add?button').eq(0).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(); ????????????????????function?standard(time)?{ ????????????????????????return?time?<?10???'0'?+?time?:?time; ????????????????????} ????????????????????var?newTime?=?`${year}-${standard(month)}-${standard(date)}?${standard(hour)}:${standard(minute)}:${standard(second)}`; ????????????????????var?s?=?$('.add?input').eq(0).val() ????????????????????var?j?=?$('.add?input').eq(1).val() ????????????????????//?找到要改的那个li ????????????????????$(e.target).parent().prev().prev().prev().prev().text(s) ????????????????????$(e.target).parent().prev().prev().prev().text(j) ????????????????????$(e.target).parent().prev().prev().text(newTime); ????????????????????//?点击确定后清空原本数据 ????????????????????$('.add?input').eq(0).val(""); ????????????????????$('.add?input').eq(1).val(""); ????????????????????$(".add").css('display',?'none') ????????????????????//?console.log(3); ????????????????}) ????????????????//?点击取消后清空原本数据 ????????????????$('.add?button').eq(1).click(function?()?{ ????????????????????$(".add").css('display',?'none') ????????????????????$('.add?input').eq(0).val(""); ????????????????????$('.add?input').eq(1).val(""); ????????????????}) ????????????}) ????????} ????????liveFn();
????????//?查询 ????????$('.one?button').eq(0).on('click',?function?()?{ ????????????//?第一个搜索框内容框不为空 ????????????if?($('.one?input').eq(0).val())?{ ????????????????//?创建新数组存储部门名称 ????????????????var?arr?=?[]; ????????????????for?(var?i?=?0;?i?<?$('.one?ul').length?-?1;?i++)?{ ????????????????????arr.push($('.one?ul').eq(i?+?1).find('li').eq(1).text()) ????????????????} ????????????????searchFun(arr,?'#department') ????????????} ????????}) ????????function?searchFun(arr,?selector)?{ ????????????var?length?=?arr.length; ????????????//?遍历数组查询 ????????????for?(var?j?=?0;?j?<?arr.length;?j++)?{ ????????????????if?(arr[j].indexOf($(selector).val())?>=?0)?{ ????????????????????var?search?=?$('.tp').clone().removeClass("tp"); ????????????????????//?为搜索到的内容添加进克隆列表 ????????????????????search.find('li').eq(1).text($('.one?ul').eq(j?+?1).find('li').eq(1).text()) ????????????????????????.next().text($('.one?ul').eq(j?+?1).find('li').eq(2).text()) ????????????????????????.next().text($('.one?ul').eq(j?+?1).find('li').eq(3).text()) ????????????????????$('.one').append(search) ????????????????????liveFn(); ????????????????????delete1(); ????????????????} ????????????} ????????????//?将前几项从页面删除 ????????????for?(var?k?=?0;?k?<?length;?k++)?{ ????????????????$('.one?ul').eq(1).remove(); ????????????} ????????} ????</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/19 0:08:17- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |