<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
//查看
$("td a.view").click(function(){
/**添加遮罩层*/
var maskHeight=$(document).height();
var maskWidth=$(document).width();
$("<div class='mask'></div>").appendTo($("body"));
$("div.mask").css({
"opacity":0.4,
"background":"#000",
"position":"absolute",
"left":0,
"top":0,
"width":maskWidth,
"height":maskHeight,
"z-index":2
})
var arr=[];
$(this).parent().siblings().each(function(){
arr.push($(this).text());
});
$(".popDiv").show().children().each(function(i){
$(this).children("span").text(arr[i]);
});
$(".close").click(function(){
$(this).parent().hide();
$(".mask").remove();
});
});
//删除
$("a.del").click(function(){
$(this).parents("tr").remove();
});
/*修改功能*/
})
//在页面装载时，让所有的td都拥有点击事件
$(document).ready(function(){
//找到所有td节点
var tds = $("td").not(":last-child");
//给所有的td节点增加点击事件
tds.dblclick(tdclick);
});
function tdclick(){
var clickfunction = this;
//0,获取当前的td节点
var td = $(this);
//1,取出当前td中的文本内容保存起来
var text = $(this).text();
//2，清空td里边内同
td.html("");
//3,建立一个文本框，也就是建一个input节点
var input = $("<input>");
//4,设置文本框中值是保存起来的文本内容
input.attr("value",text);
//4.5让文本框可以相应键盘按下的事件
input.keyup(function(event){
//记牌器当前用户按下的键值
var myEvent = event || window.event;//获取不同浏览器中的event对象
var kcode = myEvent.keyCode;
//判断是否是回车键按下
if(kcode == 13){
var inputnode = $(this);
//获取当前文本框的内容
var inputext = inputnode.val();
//清空td里边的内容,然后将内容填充到里边
var tdNode = inputnode.parent();
tdNode.html(inputext);
//让td重新拥有点击事件
tdNode.click(tdclick);
}
}).blur(function(){
var inputnode = $(this);
//获取当前文本框的内容
var inputext = inputnode.val();
//清空td里边的内容,然后将内容填充到里边
var tdNode = inputnode.parent();
tdNode.html(inputext);
//让td重新拥有点击事件
tdNode.click(tdclick);
});
//5，把文本框加入到td里边去
td.append(input);
//5.5让文本框里边的文章被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom = input.get(0);
inputdom.select();
//6,需要清楚td上的点击事件
td.unbind("click");
}
</script>
<style>
#table{
border:1px solid #ccc;
border-collapse:collapse;
width:600px;}
#table tr{height:30px;}
#table tr:nth-child(2n){background-color:#eee;}
#table tr th, td{border:1px solid #ccc;text-align: center;
}
td a{
color:red;
}
.popDiv{
width:500px;
border:1px solid purple;
position:absolute;
top:50%;left:50%;
margin-left:-250px;
margin-top:-100px;
background:#fff;
padding:10px;
display:none;
z-index:3;
border:1px solid #ccc;
}
.popDiv p{border:1px solid #ccc;padding:5px;}
.modifyDiv{
width:500px;
border:1px solid purple;
position:absolute;
top:50%;left:50%;
margin-left:-250px;
margin-top:-100px;
background:#fff;
padding:10px;
display:none;
z-index:3;
border:1px solid #ccc;
}
.modifyDiv p{border:1px solid #ccc;padding:5px;}
</style>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>前端工程师</td>
<td>10000</td>
<td>
<a href="###" class="view">查看</a>
<a href="#" class="del">删除</a>
<a href="#" class="modify">修改</a>
</td>
</tr>
<tr>
<td>李四</td>
<td>33</td>
<td>JAVA程序猿</td>
<td>12000</td>
<td>
<a href="#" class="view">查看</a>
<a href="#" class="del">删除</a>
<a href="#" class="modify">修改</a>
</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>美工</td>
<td>9000</td>
<td>
<a href="#" class="view">查看</a>
<a href="#" class="del">删除</a>
<a href="#" class="modify">修改</a>
</td>
</tr>
</table>
<div class="popDiv">
<p><strong>姓名:</strong><span></span></p>
<p><strong>年龄:</strong><span></span></p>
<p><strong>职位:</strong><span></span></p>
<p><strong>薪资:</strong><span></span></p>
<a href="#" class="close">关闭</a>
</div>
<div class="modifyDiv">
<p><strong>姓名:</strong><input type="text"></p>
<p><strong>年龄:</strong><input type="text"></p>
<p><strong>职位:</strong><input type="text"></p>
<p><strong>薪资:</strong><input type="text"></p>
<a href="#" class="yes">确定</a>
<a href="#" class="close">取消</a>
</div>
</body>
</html>
前端表格增删查改例子bootstrap+layer+jquery
5星 · 超过95%的资源 需积分: 29 143 浏览量
2017-12-12
19:40:45
上传
评论 1
收藏 996KB ZIP 举报 
biao.zip （26个子文件） 
biao 1 
1.html 6KB
2.jpg 77KB 11.jpg 345KB 44.jpg 143KB timg.jpg 18KB 33.jpg 232KB 3.jpg 82KB new2.html 5KB img 
glyphicons-halflings.png 12KB glyphicons-halflings-white.png 9KB js 
bootstrap.js 60KB bootstrap.min.js 28KB layer layer.js 21KB theme default icon.png 11KB layer.css 14KB
loading-1.gif 701B loading-2.gif 2KB icon-ext.png 6KB loading-0.gif 6KB mobile layer.js 3KB need layer.css 5KB css bootstrap.min.css 104KB bootstrap-responsive.min.css 16KB bootstrap-responsive.css 22KB bootstrap.css 124KB 改.html 5KB
- 1
- 2
前往页