HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<script src="../js/drag.js" type="text/javascript" charset="utf-8"></script><!-- 弹出框可拖拽 -->
<script>
window.onload=function () {
var tab=document.getElementById("data-table");
var mymodal=document.getElementById("myModal");//获取弹出框底层
var col=document.getElementsByClassName("col-lg-12")[0];
var tianjia=col.children[1];//获取添加按钮
var guanbi=document.getElementsByClassName("modal-footer")[0].children[0];//获取弹出框关闭按钮
var baocun=document.getElementsByClassName("modal-footer")[0].children[1];//获取弹出框保存按钮
if(document.cookie){//判断是否存在cookie
var cookiestr=document.cookie; //获取cookie字符串
var list=cookiestr.split("; ");//将其分割成数组
for( var i=0;i <list.length;i++){//将每一个cookie里存储的内容放在表里
var kv=list[i].split("=");
var message=kv[1].split(",");
var newtrr=tab.children[0].children[1].cloneNode(true);
newtrr.index=i;
for(var j=0;j<message.length;j++){
newtrr.children[j].innerText=message[j];
}
tab.children[0].appendChild(newtrr);
}
}
//表格动态编辑
tab.addEventListener("dblclick",function(e){
var e=e||event;
if(e.target.nodeName=="TD"&&e.target.className!="operation"){
var oInput=document.createElement("input");
oInput.type="text";
var val=e.target.innerText;
oInput.value=val;
e.target.innerText="";
e.target.appendChild(oInput);
oInput.focus();
}
oInput.addEventListener("blur",function(e){
var e=e||event;
var val=this.value;
e.target.parentNode.innerText=val;
})
})
//点击删除
tab.addEventListener("click",function(e){
var e=e||event;
if(e.target.nodeName=="A"){
var index=e.target.parentNode.parentNode.index;
if(index>=0){
var d=new Date();
d.setDate(d.getDate()-1);
document.cookie="NO."+index+"= ; expires="+d;
}
e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode);
}
})
//点击添加,弹出框出现
var content=document.getElementsByClassName("modal-content")[0];
var header=document.getElementsByClassName("modal-header")[0];
tianjia.addEventListener("click",function(){
mymodal.style.display="block";
dragable({//弹出框移动
down:header,
target:content.parentNode,
ranger:mymodal
});
})
//点击关闭,弹出框关闭
guanbi.addEventListener("click",function(){
mymodal.style.display="none";
})
//点击保存 生成一条新的记录显示在页面上,并生成新的cookie
var inputs=document.getElementsByTagName("input");
var num=0;
baocun.addEventListener("click",function(e){
var e=e||event;
var information=[];
var newtr=tab.children[0].children[1].cloneNode(true);
for(i=0;i<inputs.length;i++){
newtr.children[i].innerText=inputs[i].value;
information.push(inputs[i].value);
}
var d=new Date();
d.setDate(d.getDate()+2);
document.cookie="NO."+num+"="+information+"; expires="+d;
num++;
tab.children[0].appendChild(newtr);
mymodal.style.display="none";
})
}
</script>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<br>
<a class="btn btn-large btn-primary">添加</a>
<br><br>
<table id="data-table" class="table table-striped">
<tr>
<th>姓名</th>
<th>联系电话</th>
<th>学历</th>
<th>年龄</th>
<th>期望薪资</th>
<th>操作</th>
</tr>
<tr>
<td>Steven.Jobs</td>
<td>13701364084</td>
<td>大学辍学</td>
<td>45</td>
<td>$2300000</td>
<td class="operation">
<a class="btn btn-xs btn-danger">删除</a>
</td>
</tr>
<tr>
<td>ZuckerBerg</td>
<td>13701364084</td>
<td>哈佛大学博士</td>
<td>45</td>
<td>$99000000</td>
<td class="operation">
<a class="btn btn-xs btn-danger">删除</a>
</td>
</tr>
<tr>
<td>Bill.Gates</td>
<td>13701364084</td>
<td>大学辍学</td>
<td>45</td>
<td>$99000000</td>
<td class="operation">
<a class="btn btn-xs btn-danger">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="myModal" class="modal" style="background: rgba(0,0,0,0.5);">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">请添加信息</h4>
</div>
<div class="modal-body">
<form action="" style="margin-top: 30px;">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">姓 名</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">联系电话</div>
<input type="text" class="form-control" placeholder="Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">学 历</div>
<input type="text" class="form-control" placeholder="Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">年 龄</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">期望薪资</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>
拖拽的js代码
//调用该函数时传的参数是对象
// 如 :dragable({
// down:p, //点击的元素
// target : div, //移动的目标元素
// ranger: div, //其有定位的父元素
// moving : function(x,y){ //移动时要执行的函数
//
// },
// ending :function(){ //结束时要执行的函数
// console.log("拖拽结束");
// }
// })
function dragable(options){
var father=options.ranger||window;
options.down.onmousedown=function(e){
console.log(1);
var e=e||event;
var pos={
x:e.offsetX,
y:e.offsetY
};
document.onmousemove=function(e){
var e=e||event;
var maxleft=father.offsetWidth||window.innerWidth;
var maxtop=father.offsetHeight||window.innerHeight;
var _left=Math.max(0,Math.min(maxleft-options.target.offsetWidth,e.pageX-pos.x-getPagePosition(father).left));
var _top=Math.max(0,Math.min(maxtop-options.target.offsetHeight,e.pageY-pos.y-getPagePosition(father).top));
options.target.style.margin="0px";
options.target.style.left=_left+"px";
options.target.style.top=_top+"px";
options.moving?options.moving(_left,_top):"";
console.log(2);
}
}
document.onmouseup=function(){
document.onmousemove=null;
options.ending?options.ending():"";
}
}
function getPagePosition(target){
var sumleft=target.offsetLeft;
var sumtop=target.offsetTop;
while(target.offsetParent != null){
sumleft+=target.offsetParent.offsetLeft;
sumtop+=target.offsetParent.offsetTop;
target=target.offsetParent;
}
return {
left:sumleft,
top:sumtop
};
}
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
