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的精妙展现出来.最近项目打 ...
随机推荐
- hdu 1541 (基本树状数组) Stars
题目http://acm.hdu.edu.cn/showproblem.php?pid=1541 n个星星的坐标,问在某个点左边(横坐标和纵坐标不大于该点)的点的个数有多少个,输出n行,每行有一个数字 ...
- hdu 5493 (2015合肥网赛) Queue
题目;http://acm.hdu.edu.cn/showproblem.php?pid=5493 题目大意,t组数据,n个人,n行每行分别是人的身高和这个人的左边或右边比他高的人的个数,输出符合条件 ...
- JS 实现 jQuery的$(function(){});
1.浏览器渲染引擎的HTML解析流程 何谓“渲染”,其实就是浏览器把请求到的HTML内容显示出来的过程.渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成.下面是渲染引擎在取得内容之后 ...
- Node.js v7.4.0 Documentation Addons
https://nodejs.org/docs/latest/api/addons.html Node.js Addons are dynamically-linked shared objects, ...
- BZOJ 1227 [SDOI2009]虔诚的墓主人 - 扫描线
Solution 离散化 扫描线, 并用 $rest[i]$ 和 $cnt[i]$ 记录 第$i$列 总共有 $cnt[i]$棵常青树, 还有$rest[i]$ 没有被扫描到. 那么 第$i$ 列的方 ...
- 服务程序 -st
Windows 服务由三部分组成:1.一个服务可执行文件:2.一个服务控制程序(SCP):3.服务控制管理器(SCM),负责在 HKLM\SYSTEM\CurrentControlSet\Servic ...
- xgboost安装
安装连接:https://www.zhihu.com/question/46377605 软件连接:https://www.lfd.uci.edu/~gohlke/pythonlibs/#xgboos ...
- 安装linux子系统, 如何用win10 里面的linux子系统来进行通信
cd /mnt/d/linux_share即可 就把linux_share这个目录挂载到linux里面了.这样windows和linux可以同时修改和访问这个文件夹里面的内容. 安装:cmd中输入ba ...
- centos nfs配置备忘
[需求]web应用需要部署在两台机器,图片目录共用,MySQL共用. [环境]Server: 192.168.168.10Client: 192.168.168.20 [配置步骤]1.在两台机器上安装 ...
- 利用 FFmpeg 将 MP4 转成 FLV
最近做一个小项目,要在线播放录制的 MP4 视频,想开源的 flash player 或 html 5 可以播放.可,虽然 MP4 是 H.264 编码,但就是播放不了.可能是封装方式(PS 方式)不 ...