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的精妙展现出来.最近项目打 ...
随机推荐
- 希尔排序和归并排序（java实现）
希尔排序 希尔排序算法实际上是一种特殊的插入排序,由DL．Shell于1959年提出而得名. 算法思想:希尔排序使数组中任意间隔为h的元素都是有序的,这些数组称为h有序数组,对于每个h,按插入排序进行 ...
- asp.net读取xml接口
//发送获取xml请求 public static string SentRequest(String url) { HttpWebRequest req = WebRequest.CreateHtt ...
- 循环&信息添加&颜色修改
#import "AViewController.h" @interface AViewController () <UIActionSheetDelegat ...
- 超强干货，11个灰常实用的AI设计小技巧！
11个超级实用的AI设计小技巧!涉及到很多的实用操作,纯干货经验总结,灰常值得收藏,赶快转走学起来吧! 编辑:千锋UI设计
- AUC和ROC
https://www.cnblogs.com/gatherstars/p/6084696.html
- 关于传统项目打成war包的的分析
技术在不断的革新,以前的项目没有jar管理工具时,都是手动将依赖的jar拷贝到项目之下,然后Build Path,之后Maven出现了,出现了jar包中央仓库,所有的jar包资源集中在这里,免去频繁去 ...
- spring学习 十一 AspectJ-based的通知入门 不带参数的通知
AspectJ-Based方式的AOP,通知类不需要实现任何接口,且前置通知,后置通知,环绕通知,异常通知都可以写在一个类中,下面先实现一个简单的,不带参数的通知. 第一步定义通知类,通知类中的通知( ...
- Python终端彩色字体的输出
实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表示就是033 ...
- web前端面试题库
web前端面试题及答案 1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) ...
- kbmmw 的远程桌面功能2-android手机端
前面讲了PC 端的远程操作,今天讲一下如何用手机控制远程桌面(真的能操作的很爽吗?), 要使手机可以远程控制,首先在在kbmmwconfig.inc 文件里面加入FMX 支持 {$DEFINE KBM ...