jQuery+Bootstrap表格内容修改删除编辑插件资源-CSDN下载

共14个文件

css：3个

ttf：2个

woff2：2个

jQuery

Bootstrap

需积分: 50 102 浏览量 2018-03-14 13:47:57 上传评论收藏 509KB ZIP 举报

在IT行业中，jQuery和Bootstrap是两个非常流行的前端开发框架，它们极大地简化了网页的交互性和设计。本主题聚焦于一个特定的应用场景：使用jQuery和Bootstrap创建具有内容修改、删除和编辑功能的表格插件。 jQuery是一个轻量级的JavaScript库，它使得JavaScript编程更加简单、高效。jQuery的核心特性包括DOM操作、事件处理、动画效果和Ajax交互。在本项目中，jQuery将用于处理表格中的动态事件，如点击单元格进行编辑、删除确认以及数据提交等。 Bootstrap则是Twitter推出的一个开源CSS/HTML框架，它提供了一套响应式布局、移动设备优先的WEB开发工具，能够快速构建美观且一致的界面。Bootstrap包含了一系列预定义的样式、组件和JavaScript插件，可以轻松创建表格、按钮、模态框等元素。在描述中提到的"jQuery+Bootstrap表格内容修改删除编辑插件"，其工作原理可能是这样的： 1. **HTML结构**：表格（`<table>`）应采用Bootstrap的样式，如`.table`类来获取基本的表格样式，可能还会使用`.table-striped`、`.table-bordered`等增强视觉效果。表格的每一行（`<tr>`）都包含可编辑的数据单元格（`<td>`）。 2. **jQuery事件**：使用jQuery监听表格元素的点击事件，比如`$('td').click(function())`。当用户点击某个单元格时，该单元格可能变为可编辑状态，通常通过插入一个`<input>`元素来替换原始文本。 3. **编辑模式**：在编辑模式下，用户可以修改单元格内容。可能还需要添加保存和取消编辑的按钮，以便用户确认或放弃更改。 4. **删除功能**：对于每一行，可能有一个删除按钮，当用户点击后会触发一个确认删除的模态对话框（Bootstrap的`.modal`）。模态框中会有确认和取消选项，确认后通过jQuery的Ajax功能向服务器发送请求，删除相应的数据。 5. **Ajax交互**：jQuery的Ajax方法（如`$.ajax()`或`$.post()`）用于在后台处理数据的保存和删除，这样可以在不刷新页面的情况下更新数据。 6. **CSS和Fonts**：压缩包中的`css`文件夹可能包含了自定义样式，用于调整表格和编辑元素的外观。`fonts`文件夹可能包含Web字体资源，以确保一致的跨浏览器字体显示。 7. **JavaScript**：`js`文件夹中的脚本文件（可能包括`bootstrap.js`和自定义脚本）负责实现上述的所有交互逻辑。Bootstrap的JavaScript插件可能被用到，如`data-toggle`和`data-dismiss`属性来控制模态框的显示和关闭。总结来说，这个插件利用jQuery和Bootstrap的强大功能，为用户提供了一个交互性极强的表格，支持内容的即时编辑、删除，并通过Ajax实现了无刷新的数据更新。这对于数据展示和管理类的Web应用来说是一个非常实用的功能。在实际开发中，开发者可以根据需求进行定制，例如增加排序、过滤等功能，或者整合后端API以实现完整的CRUD操作。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery+Bootstrap表格内容修改删除编辑插件.zip （14个子文件）

css

bootstrap.min.css 118KB

demo.css 500B

font-awesome.min.css 30KB

fonts

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.ttf 44KB

fontawesome-webfont.ttf 162KB

glyphicons-halflings-regular.woff2 18KB

fontawesome-webfont.woff2 75KB

glyphicons-halflings-regular.eot 20KB

fontawesome-webfont.eot 162KB

fontawesome-webfont.woff 96KB

jquery-1.11.0.min.js 94KB

bootstable.js 8KB

index.html 2KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery+Bootstrap表格内容修改删除编辑插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <style type="text/css"> .box{ width: 20px; height: 20px; padding: 2px; border:1px solid #ccc; border-radius: 2px; } </style> </head> <body><script src="/demos/googlegg.js"></script> <div class="container"> <div class="row"> <div class="col-md-12" style="padding:2em 0;"> <p>点击 <i class="fa fa-pencil box"></i> 按钮可以对表格进行编辑，点击 <i class="fa fa-trash-o box"></i>按钮可以将该表格行删除。</p> <div class="table-responsive"> <table class="table table-bordered table-striped" id="mytable"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>email</td> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>[email protected]</td> </tr> <tr> <td>李四</td> <td>23</td> <td>[email protected]</td> </tr> <tr> <td>王五</td> <td>24</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </div> <div class="col-md-12" style="padding-bottom:2em;"> <button class="btn btn-info" id="add"><i class="fa fa-plus"></i> 添加新的表格行</button> </div> </div> </div> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/bootstable.js"></script> <script type="text/javascript"> $('#mytable').SetEditable({ $addButton: $('#add') }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈