<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 600px;
margin: 0 auto;
}
.add {
width: 80px;
height: 30px;
}
.box2,.box4 {
display: none;
width: 100%;
height: 600px;
background-color: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
}
.box3,.box5 {
width: 600px;
margin: 0 auto;
font-size: 40px;
color: #fff;
}
.box3 label,.box5 label {
width: 180px;
height: 60px;
display: inline-block;
text-align: center;
}
.box3 input,.box5 input {
width: 400px;
height: 60px;
margin: 10px 0;
font-size: 40px;
}
.box3 .btn,.box3 .cleat,.box5 .btn,.box5 .cleat {
width: 200px;
height: 60px;
margin-left: 75px;
}
</style>
</head>
<body>
<div class="boss">
<!-- 表格 -->
<div class="box1">
<input class="add" onclick="addClick()" type="button" name="" id="" value="新增" />
<input class="add" onclick="addClick()" type="button" name="" id="" value="序号" />
<input class="add" onclick="delClick()" type="button" name="" id="" value="全删" />
<input type="text" class="search" placeholder="请输入要查询的内容" onfocus="ssbuur()">
<button class="search1" >搜索</button>
<button class="reset" style="visibility: hidden;">恢复</button>
<table border="1" width="600" cellspacing="0" cellpadding="0">
<tr>
<th>选择</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>学号</th>
<th>手机号</th>
<th>操作</th>
</tr>
</table>
</div>
<!-- 新增表单 -->
<div class="box2">
<div class="box3">
<h3>新增表单</h3>
<label>姓 名</label>
<input type="text" name="" id="" value="" />
<br>
<label>年 龄</label>
<input type="number" name="" id="" value="" />
<br>
<label>性 别</label>
<input type="text" name="" id="" value="" />
<br>
<label>学 号</label>
<input type="number" onblur="addBlur(this)" name="" id="" value="" />
<br>
<label>手机号</label>
<input type="number" name="" id="" value="" />
<br>
<input class="btn" onclick="inputClick()" type="button" value="提交" />
<input class="cleat" onclick="cleatClick()" type="button" value="取消" />
</div>
</div>
<!-- 修改表单 -->
<div class="box4">
<div class="box5">
<h3>修改表单</h3>
<label>姓 名</label>
<input type="text" name="" id="" value="" />
<br>
<label>年 龄</label>
<input type="text" name="" id="" value="" />
<br>
<label>性 别</label>
<input type="text" name="" id="" value="" />
<br>
<label>学 号</label>
<input onblur="editSchool(this)" type="text" name="" id="" value="" />
<br>
<label>手机号</label>
<input type="text" name="" id="" value="" />
<br>
<input class="btn" onclick="eathClick()" type="button" value="提交" />
<input class="cleat" onclick="eathDelClick()" type="button" value="取消" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 获取表单
var box2 =document.querySelector(".box2");
var box4 =document.querySelector(".box4");
// 获取table
var table = document.querySelector("table");
// 获取input
var input = document.querySelectorAll(".box2 input");
var eaitInput = document.querySelectorAll(".box4 input");
// 存每一条表单的内容
var arr = [];
// 新增--显示表单
function addClick(){
box2.style.display = "block";
}
// 新增中的取消
function cleatClick(){
box2.style.display = "none";
clearing();
}
// 新增验证学号是否唯一
function addBlur(user){
for(var a=0;a<arr.length;a++){
if(arr[a].schoolNum.indexOf(user.value)!=-1){
alert("学号重复,请重新输入！");
user.value = "";
}
}
}
// 修改验证学号是否唯一
function editSchool(user){
for(var a=0;a<arr.length;a++){
if(arr[a].schoolNum.indexOf(user.value)!=-1){
alert("学号重复,请重新输入！");
user.value = "";
}
}
}
// 清空新增表单
function clearing(){
for(var a=0;a<input.length-2;a++){
input[a].value="";
}
}
// 新增提交数据
function inputClick(){
for(var x=0;x<input.length-2;x++){
if(input[x].value==""||input[x].value==null||input[x].value==undefined){
alert("请完成所有表单！");
return false;
}
}
// 存一条表单的内容
var obj = {
"name":"",
"age":"",
"sex":"",
"schoolNum":"",
"iphone":""
}
var b=0;
for(var a in obj){
obj[a]=input[b].value;
b++;
}
arr.push(obj);
// 创建tr
var tr = document.createElement("tr");
// 创建复选框
var tdCheck = document.createElement("td");
// 添加input
tdCheck.innerHTML = "<input type='checkbox'/>"
// 把td添加给tr
tr.appendChild(tdCheck);
// 创建数据表单的td
for(var a=0;a<5;a++){
var td = document.createElement("td");
var text = document.createTextNode(input[a].value);
td.appendChild(text);
tr.appendChild(td);
}
// 创建删除和修改按钮
var tdBtn = document.createElement("td");
tdBtn.innerHTML = "<input type='button' οnclick='eaitBtn(this)' value='修改' />"
+"<input type='button' οnclick='delBtn(this)' value='删除' />";
// var eait = document.createElement("input");
// eait.setAttribute("type","button");
// eait.setAttribute("value","修改");
// tdBtn.appendChild(eait);
tr.appendChild(tdBtn);
table.appendChild(tr);
box2.style.display = "none";
clearing();
}
// 修改
var thisEait;
function eaitBtn(user){
console.log(user);
thisEait = user;
var numLength = user.parentNode.parentNode;
for(var a=1;a<numLength.childNodes.length-1;a++){
eaitInput[a-1].value = numLength.childNodes[a].innerHTML;
}
box4.style.display = "block";
}
// 修改的提交
function eathClick(){
var numLength = thisEait.parentNode.parentNode;
for(var a=1;a<numLength.childNodes.length-1;a++){
for(var b=0;b<arr.length;b++){
if(arr[b].schoolNum.indexOf(eaitInput[4-1].value)!=-1){
arr[b].name=eaitInput[0].value;
arr[b].age=eaitInput[1].value;
arr[b].sex=eaitInput[2].value;
arr[b].schoolNum=eaitInput[3].value;
arr[b].iphone=eaitInput[4].value;
}
}
numLength.childNodes[a].innerHTML=eaitInput[a-1].value;
}
box4.style.display = "none";
}
// 修改的取消
function eathDelClick(){
box4.style.display = "none";
}
// 单行删除
function delBtn(user){
var indexUser = user.parentNode.parentNode;
console.log(indexUser.childNodes[4].innerHTML);
for(var i=0;i<arr.length;i++){
if(arr[i].schoolNum == indexUser.childNodes[4].innerHTML){
arr.splice(i,1);
}
}
user.parentNode.parentNode.remove();
}
// 全删
function delClick(){
var tr = document.querySelectorAll("tr");
if(tr.length<2){
alert("当前数据条数为0，请添加数据");
}
for(var a=1;a<tr.length;a++){
// checked获取复选框值
for(var b=0;b<arr.length;b++){
if(tr[a].firstChild.firstChild.checked==true&&
arr[b].schoolNum.indexOf(tr[a].childNodes[4].innerHTML)!=-1){
tr[a].remove();
arr.splice(b,1);
}
}
}
}
</script>
</html>
扫一扫
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
