前端表格增删查改例子bootstrap+layer+jquery资源-CSDN下载

共26个文件

jpg：6个

css：6个

png：4个

表格增删查改

5星 · 超过95%的资源需积分: 50 132 浏览量 2017-12-12 19:40:45 上传评论 1 收藏 996KB ZIP 举报

在前端开发中，数据展示和交互是至关重要的环节，尤其在网页中，表格是一种常见的数据组织形式。"前端表格增删查改例子bootstrap+layer+jquery"是一个实用的示例项目，它结合了流行的前端技术和组件，以实现表格数据的动态操作。下面将详细介绍这个项目所涉及的知识点。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具集，它提供了丰富的HTML、CSS以及JavaScript组件，可以帮助开发者快速构建响应式和移动设备优先的网页。在本项目中，Bootstrap的表格类被用来创建美观且响应式的表格结构，使得数据在不同设备上都能有良好的显示效果。 jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。在本例中，jQuery被用来处理表格中的各种交互，如点击事件、数据获取与更新等。通过使用jQuery，开发者可以编写更少的代码实现更多的功能，提高开发效率。再者，Layer是一个轻量级的弹出层插件，常用于创建各种提示、对话框和弹窗。在这个项目中，layer被用来实现表格数据的增、删、查、改操作的弹窗界面。当用户需要添加新记录或者编辑现有记录时，layer弹窗会提供一个交互界面，用户可以在其中输入或修改数据，然后提交到服务器。表格增删查改是前端数据管理的核心功能。在本项目中，增指的是添加新的数据行；删是指删除已有的数据行；查即查询，通常通过搜索框进行关键词搜索；改则是指更新已有数据。这些操作在前端通常是通过Ajax技术实现的，它可以异步地向服务器发送请求，更新表格数据，而无需刷新整个页面。具体实现过程可能包括以下步骤： 1. 使用jQuery监听表格上的操作，如点击“新增”按钮触发添加弹窗，点击“删除”按钮触发删除确认弹窗。 2. 在layer弹窗中，通过事件绑定获取用户输入的数据，或者显示待编辑的数据。 3. 使用Ajax发送POST或PUT请求到后台服务器，处理数据的增、删、改操作。 4. 服务器处理请求后返回响应，前端根据响应更新表格内容。 5. 对于查询操作，用户输入关键词后，同样使用Ajax发送GET请求，服务器返回匹配的数据显示在表格中。这个项目是一个很好的学习和实践前端数据操作的案例，它展示了如何利用Bootstrap构建美观的表格，利用jQuery处理用户交互，以及使用layer弹窗增强用户体验。通过这个项目，开发者可以深入理解如何在实际项目中整合这些技术，实现高效且用户体验良好的前端数据管理功能。

资源推荐

资源详情

资源评论

收起资源包目录

biao.zip （26个子文件）

biao

1.html 6KB

2.jpg 77KB

11.jpg 345KB

44.jpg 143KB

timg.jpg 18KB

33.jpg 232KB

3.jpg 82KB

new2.html 5KB

img

glyphicons-halflings.png 12KB

glyphicons-halflings-white.png 9KB

bootstrap.js 60KB

bootstrap.min.js 28KB

layer

layer.js 21KB

theme

default

icon.png 11KB

layer.css 14KB

loading-1.gif 701B

loading-2.gif 2KB

icon-ext.png 6KB

loading-0.gif 6KB

mobile

layer.js 3KB

need

layer.css 5KB

css

bootstrap.min.css 104KB

bootstrap-responsive.min.css 16KB

bootstrap-responsive.css 22KB

bootstrap.css 124KB

改.html 5KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(function(){ //查看 $("td a.view").click(function(){ /**添加遮罩层*/ var maskHeight=$(document).height(); var maskWidth=$(document).width(); $("<div class='mask'></div>").appendTo($("body")); $("div.mask").css({ "opacity":0.4, "background":"#000", "position":"absolute", "left":0, "top":0, "width":maskWidth, "height":maskHeight, "z-index":2 }) var arr=[]; $(this).parent().siblings().each(function(){ arr.push($(this).text()); }); $(".popDiv").show().children().each(function(i){ $(this).children("span").text(arr[i]); }); $(".close").click(function(){ $(this).parent().hide(); $(".mask").remove(); }); }); //删除 $("a.del").click(function(){ $(this).parents("tr").remove(); }); /*修改功能*/ }) //在页面装载时，让所有的td都拥有点击事件 $(document).ready(function(){ //找到所有td节点 var tds = $("td").not(":last-child"); //给所有的td节点增加点击事件 tds.dblclick(tdclick); }); function tdclick(){ var clickfunction = this; //0,获取当前的td节点 var td = $(this); //1,取出当前td中的文本内容保存起来 var text = $(this).text(); //2，清空td里边内同 td.html(""); //3,建立一个文本框，也就是建一个input节点 var input = $("<input>"); //4,设置文本框中值是保存起来的文本内容 input.attr("value",text); //4.5让文本框可以相应键盘按下的事件 input.keyup(function(event){ //记牌器当前用户按下的键值 var myEvent = event || window.event;//获取不同浏览器中的event对象 var kcode = myEvent.keyCode; //判断是否是回车键按下 if(kcode == 13){ var inputnode = $(this); //获取当前文本框的内容 var inputext = inputnode.val(); //清空td里边的内容,然后将内容填充到里边 var tdNode = inputnode.parent(); tdNode.html(inputext); //让td重新拥有点击事件 tdNode.click(tdclick); } }).blur(function(){ var inputnode = $(this); //获取当前文本框的内容 var inputext = inputnode.val(); //清空td里边的内容,然后将内容填充到里边 var tdNode = inputnode.parent(); tdNode.html(inputext); //让td重新拥有点击事件 tdNode.click(tdclick); }); //5，把文本框加入到td里边去 td.append(input); //5.5让文本框里边的文章被高亮选中 //需要将jquery的对象转换成dom对象 var inputdom = input.get(0); inputdom.select(); //6,需要清楚td上的点击事件 td.unbind("click"); } </script> <style> #table{ border:1px solid #ccc; border-collapse:collapse; width:600px;} #table tr{height:30px;} #table tr:nth-child(2n){background-color:#eee;} #table tr th, td{border:1px solid #ccc;text-align: center; } td a{ color:red; } .popDiv{ width:500px; border:1px solid purple; position:absolute; top:50%;left:50%; margin-left:-250px; margin-top:-100px; background:#fff; padding:10px; display:none; z-index:3; border:1px solid #ccc; } .popDiv p{border:1px solid #ccc;padding:5px;} .modifyDiv{ width:500px; border:1px solid purple; position:absolute; top:50%;left:50%; margin-left:-250px; margin-top:-100px; background:#fff; padding:10px; display:none; z-index:3; border:1px solid #ccc; } .modifyDiv p{border:1px solid #ccc;padding:5px;} </style> </head> <body> <table id="table"> <tr> <th>姓名</th> <th>年龄</th> <th>职位</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td>前端工程师</td> <td>10000</td> <td> <a href="###" class="view">查看</a> <a href="#" class="del">删除</a> <a href="#" class="modify">修改</a> </td> </tr> <tr> <td>李四</td> <td>33</td> <td>JAVA程序猿</td> <td>12000</td> <td> <a href="#" class="view">查看</a> <a href="#" class="del">删除</a> <a href="#" class="modify">修改</a> </td> </tr> <tr> <td>王五</td> <td>25</td> <td>美工</td> <td>9000</td> <td> <a href="#" class="view">查看</a> <a href="#" class="del">删除</a> <a href="#" class="modify">修改</a> </td> </tr> </table> <div class="popDiv"> <p><strong>姓名:</strong><span></span></p> <p><strong>年龄:</strong><span></span></p> <p><strong>职位:</strong><span></span></p> <p><strong>薪资:</strong><span></span></p> <a href="#" class="close">关闭</a> </div> <div class="modifyDiv"> <p><strong>姓名:</strong><input type="text"></p> <p><strong>年龄:</strong><input type="text"></p> <p><strong>职位:</strong><input type="text"></p> <p><strong>薪资:</strong><input type="text"></p> <a href="#" class="yes">确定</a> <a href="#" class="close">取消</a> </div> </body> </html>

评论收藏

内容反馈