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的精妙展现出来.最近项目打 ...
随机推荐
- poj 2886 (线段树+反素数打表) Who Gets the Most Candies?
http://poj.org/problem?id=2886 一群孩子从编号1到n按顺时针的方向围成一个圆,每个孩子手中卡片上有一个数字,首先是编号为k的孩子出去,如果他手上的数字m是正数,那么从他左 ...
- UISwitch开关控件属性介绍以及获取开关状态并做出响应
(1)UISwitch的大小也是固定的,不随我们frame设置的大小改变:也是裁剪成圆角的,设置背景就露马脚发现背景是矩形. (2)UISwitch的背景图片设置无效,即我们只能设置颜色,不能用图片当 ...
- 大牛的距离（笑cry）精简算法
在一条数轴上有N头牛在不同的位置上,每头牛都计算到其它各头牛的距离.求这n*(n-1)个距离的总和.1<= N <= 10000.每头牛所在位置是一个范围在0到1,000,000,000之 ...
- powershell上传证书
https://www.cnblogs.com/threestone/p/4001632.html powershell上传证书
- keepalived+nginx+tomcat+redis集群环境部署
1.所需软件.jar包.配置文件下载:http://pan.baidu.com/s/1dFgntst 2.环境说明: centos6.5 64位 主节点:192.168.40.121 副节点:192 ...
- mybatis3.2初学感悟
新手,学了mybatis框架一周,写点感悟下来. mybatis,是操作数据库,持久层的一个框架,它是对JDBC的封装.看到了这个框架,我突然感受到封装与抽象的力量.也明白了些为什么要分层的原因. 记 ...
- Tomcat配置Solr4.8
简介:Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http G ...
- .net调用word转换pdf出现80080005错误的解决办法
检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 80080005. 1:在服务器上安装offi ...
- oracle的在没有安装服务端连接远处服务端的方法
1.找到oracle的安装目录.如:C:\oracle\product\10.2.0\db_1\network\ADMIN 2.找到tnsnames.ora文件 3. 其中中文部分是需要修改的部分,除 ...
- UGUI控制UI的显示层级
1.调用transform.SetAsLastSibling();将该UI的显示层级调到最上面. 调用transform.SetAsFirstSibling();将该UI的显示层级调到最下面. 2. ...