bootstrap增删改查
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<table class="table table-bordered table-hover text-center">
<tr>
<td>
编号
</td>
<td>用户名</td>
<td>折扣</td>
<td>超级会员</td>
<td>
城市
</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>咖啡</td>
<td>0.8</td>
<td>是</td>
<td>广州</td>
<td>
<button class="btn btn-primary btn-xs change" data-toggle="modal" data-target = "#change_modal">修改</button>
<button class="btn btn-danger btn-xs view"data-toggle="modal" data-target = "#view">查看</button>
<button class="btn btn-warning btn-xs delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>奶茶</td>
<td>0.5</td>
<td>否</td>
<td>武汉</td>
<td>
<button class="btn btn-primary btn-xs change" data-toggle="modal" data-target = "#change_modal">修改</button>
<button class="btn btn-danger btn-xs view"data-toggle="modal" data-target = "#view">查看</button>
<button class="btn btn-warning btn-xs">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>绿茶</td>
<td>0.5</td>
<td>是</td>
<td>深圳</td>
<td>
<button class="btn btn-primary btn-xs change" data-toggle="modal" data-target = "#change_modal">修改</button>
<button class="btn btn-danger btn-xs view" data-toggle="modal" data-target = "#view">查看</button>
<button class="btn btn-warning btn-xs delete">删除</button>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<form class="form-inline pull-right">
<input type="text" class="form-control" id="search" />
<button class="btn btn-primary" id="serach_btn" type="button">搜索</button>
</form>
<button class="btn btn-danger" data-toggle="modal" data-target = "#add_modal">增加</button>
<div class="clearfix">
</div>
</div>
</div>
<!--修改-->
<div class="modal fade" id="change_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<strong>会员修改</strong>
<button class="close" data-dismiss = "modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label class="control-label">编号</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入编号" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">用户名</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入用户名" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">折扣</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入折扣" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">超级会员</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入超级会员" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">城市</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入超级城市" />
</div>
<div class="clearfix">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss = "modal">取消</button>
<button class="btn btn-primary confire" data-dismiss = "modal">确定</button>
</div>
</div>
</div>
</div>
<!--修改-->
<!--see-->
<div class="modal fade" id="view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<strong>查看会员</strong>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="col-md-2">
<label class="control-label">编号</label>
</div>
<div class="col-md-10">
<span></span>
</div>
<div class="clearfix">
</div>
<div class="col-md-2">
<label class="control-label">用户名</label>
</div>
<div class="col-md-10">
<span></span>
</div>
<div class="clearfix">
</div>
<div class="col-md-2">
<label class="control-label">折扣</label>
</div>
<div class="col-md-10">
<span></span>
</div>
<div class="clearfix">
</div>
<div class="col-md-2">
<label class="control-label">超级会员</label>
</div>
<div class="col-md-10">
<span></span>
</div>
<div class="clearfix">
</div>
<div class="col-md-2">
<label class="control-label">城市</label>
</div>
<div class="col-md-10">
<span></span>
</div>
<div class="clearfix">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!--see-->
<!--append-->
<div class="modal fade" id="add_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<strong>增加会员</strong>
<button class="close" data-dismiss = "modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label class="control-label">编号</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入编号" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">用户名</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入用户名" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">折扣</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入折扣" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">超级会员</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入超级会员" />
</div>
<div class="clearfix">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">城市</label>
</div>
<div class="col-md-10">
<input class="form-control" placeholder="请输入超级城市" />
</div>
<div class="clearfix">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss = "modal">取消</button>
<button class="btn btn-primary add" data-dismiss = "modal">确定</button>
</div>
</div>
</div>
</div>
<!--append-->
<script>
$(function(){
var _this = null
//修改
var userList = []
$(document).on("click",".change",function(){
_this = $(this).parents("tr")
userList = []
$(this).parent().siblings().each(function(){
userList.push($(this).text())
})
// console.log(userList)
$("#change_modal").find("input").each(function(i){
$(this).val(userList[i])
// console.log(i)
})
})
//修改确定
var changList = []
$(document).on("click",".confire",function(){
changList = []
$(this).parents(".modal-content").find("input").each(function(){
changList.push($(this).val())
})
// console.log(_this)
_this.find("td").each(function(i){
$(this).text(changList[i])
})
})
//查看
// each 遍历 与for循环类似
var viewList=[]
$(document).on("click",".view",function(){
viewList=[] //清空上一次输入内容
$(this).parent().siblings().each(function(){
viewList.push($(this).text())
})
$("#view").find("span").each(function(i){
$(this).text(viewList[i])
})
})
//删除
$(document).on("click",".delete",function(){
$(this).parents("tr").remove()
})
//增加
var addList=[];
$(document).on("click",".add",function(){
addList=[]
$("#add_modal").find("input").each(function(){
addList.push($(this).val())
})
var str='<tr><td>'+addList[0]+'</td><td>'+addList[1]+'</td><td>'+addList[2]+'</td><td>'+addList[3]+'</td><td>'+addList[4]+'</td><td> <button class="btn btn-primary btn-xs change" data-toggle="modal" data-target = "#change_modal">修改</button> <button class="btn btn-danger btn-xs view"data-toggle="modal" data-target = "#view">查看</button> <button class="btn btn-warning btn-xs">删除</button></td></tr>'
$("table").append(str)
})
//搜索
$("#serach_btn").click(function(){
var oTxt=$("#search").val()
if (oTxt.length==0) {
alert("输入不能为空")
} else{
if($("table tr td:contains("+oTxt+")").length==0){
alert("找不到数据")
}else{
$("table tr:not(:first)").hide()
$("table tr:contains("+oTxt+")").show()
}
}
})
})
</script>
</body>
</html>
bootstrap增删改查的更多相关文章
- SSM+BootStrap增删改查，以及头像上传
先看界面 点击编辑之后 具体代码请往下看 一.jsp界面 <%@ page language="java" contentType="text/html; char ...
- bootstrap+Ajax+SSM(maven搭建)实现增删改查
https://www.jianshu.com/p/d76316b48e3e 源码: https://github.com/Ching-Lee/crud 功能点: 分页 数据校验 ajax Rest风 ...
- 通过flask实现web页面简单的增删改查bootstrap美化版
通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...
- 【BootStrap】--具有增删改查功能的表格Demo
[BootStrap]--具有增删改查功能的表格Demo 目录(?)[+] 前言 版本一 样式 代码 版本二 样式 代码 版本三 样式 代码 总结 前言 bootstrap的表格样式,有类似EasyU ...
- 基于MVC和Bootstrap的权限框架解决方案 二．添加增删改查按钮
上一期我们已经搭建了框架并且加入了列表的显示, 本期我们来加入增删改查按钮 整体效果如下 HTML部分,在HTML中找到中意的按钮按查看元素,复制HTML代码放入工程中 <a class=&qu ...
- 使用Bootstrap模态框实现增删改查功能
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 本文实现的是使用模态框实现简单的增删改查的功能. ...
- JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
随机推荐
- javascript的变量类型：var、let、const
不同点:可变性,与作用域的关系. 可变性:const定义的变量都不可变,而var和let可以任意更改. const 只能在声明时被初始化一次,之后不允许将全新的值赋值给const变量.但可以修改con ...
- 探索未知种族之osg类生物---器官初始化三
当判断到viewer中没有一个graphicContext可用时,osg就会默认的进行一次对viewer的实现操作,这样可以保证osg以后可以安心的在屏幕上进行作画.那我们就来看看这个osgViewe ...
- CF Round #510 (Div. 2)
前言:没想到那么快就打了第二场,题目难度比CF Round #509 (Div. 2)这场要难些,不过我依旧菜,这场更是被\(D\)题卡了,最后\(C\)题都来不及敲了..最后才\(A\)了\(3\) ...
- 关于redis和memcached的一些想法
看了redis和memcached,想到自己前几年以前会把内存分配及调用和程序写在一起.确实是不合理的.这样的话,主进程就会越来越大,而且模块也不是完全独立.不能做到松耦合. 实质就是把内存的读写I/ ...
- 使用VisualStudio开发php的图文设置方法
早先在asp横行的年代,php和asp一样,大都都是html中夹杂代码,说实话,这时候IDE的确用处不是很大,倒是类似于dw之类的设计器甚为上手. 现在,三层.mvc之类的思想遍地开花,使得代码和ht ...
- JDK 之 NIO 2 WatchService、WatchKey（监控文件变化）
JDK 之 NIO 2 WatchService.WatchKey(监控文件变化) JDK 规范目录(https://www.cnblogs.com/binarylei/p/10200503.html ...
- PHP去除重复的数组数据
PHP去除重复的数组数据 <?php $input = array("a" => "green","", "red&q ...
- 模态框MODAL的一些事件捕捉
下表列出了模态框中要用到事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.modal 在调用 show 方法后触发. $('#identifier').on('show.bs.m ...
- PHP ini 配置无效的坑给自己记录
装redis 扩展时,发现装成功之后扩展一直加载不上, 于是phpinfo 发现Configuration File (php.ini) Path:none Loaded Configuration ...
- Ajax原生四大步骤
1.首先创建一个js文件夹名为common.js.创建一个createXhr()的函数.在此方法中创建异步对象XMLHttpRequest,后面使用的时候直接引入common.js文件,然后进行调用就 ...