雷盟-前端-20230106 - 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.js"></script>
<style>
html,
body {
width: 800px;
height: 500px;
margin: 20px auto;
}
table,
td,
th,
tr {
border: 1px solid #ccc;
padding: 2px;
}
table {
width: 800px;
border-collapse: collapse;
}
#big {
width: 800px;
position: absolute;
}
#sou {
height: 100px;
}
#ipt {
line-height: 20px;
text-align: center;
margin-left: 10px;
}
#add {
padding-top: 10px;
padding-left: 50px;
margin: 50px auto;
background-color: aquamarine;
height: 250px;
width: 300px;
}
#tan {
width: 200px;
height: 80px;
border: 1px solid #666;
text-align: center;
background-color: rgb(168, 219, 219);
padding-bottom: 15px;
position: relative;
top: -346px;
left: 290px;
display: none;
}
#xiu {
width: 300px;
height: 100px;
border: 1px solid #666;
text-align: center;
background-color: rgb(168, 219, 219);
padding-bottom: 15px;
position: relative;
top: -330px;
left: 245px;
display: none;
}
#tab {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="big">
<div id="add">
<p>姓名 <input type="text" id="name"></p>
<p>年龄 <input type="text" id="age"></p>
<p>性别 <input type="text" id="sex"></p>
<p>电话 <input type="text" id="tel"></p>
<p>密码 <input type="password" id="pas"></p>
<p><button id="btn4">添加</button></p>
</div>
<div id="sou">
ID <input type="text" id="ipt" placeholder="请输入查询">
<button id="btn">搜索</button>
<table>
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div id="tab">
<table>
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="tan">
<div id="del">
<p>请确认是否删除</p>
<button id="yes">确认</button>
<button id="no">取消</button>
</div>
</div>
<div id="xiu">
<p> 姓名：<input type="text" id="newName"></p>
<p><button id="btn3">确认修改</button></p>
</div>
<div id="page">
</div>
</div>
<script>
var ps = document.querySelector('#add').querySelectorAll('input');
var big = document.querySelector('#big');
var ipt = document.querySelector('#ipt');
var btn = document.querySelector('#btn');
var sou = document.querySelector('#sou');
var tab = document.querySelector('#tab');
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var btn11 = document.querySelector('.btn11');
var btn22 = document.querySelector('.btn22');
var tan = document.querySelector('#tan');
var del = document.querySelector('#del');
var yes = document.querySelector('#yes');
var no = document.querySelector('#no');
var xiu = document.querySelector('#xiu');
var newName = document.querySelector('#newName');
var btn3 = document.querySelector('#btn3');
var btn4 = document.querySelector('#btn4');
// 给tab渲染list数据
function renderList() {
// 发送ajax--接收响应的数据
axios.get('http://162.14.107.109/list').then(res => {
// 成功的回调
console.log(res);
// console.log(res.data.data);
var stuList = res.data.data.data;
var html = '';
// 遍历数组
stuList.forEach((v) => {
// console.log(v);
html += ` <tr>
<td>${v.id}</td>
<td>${v.name}</td>
<td>${v.age}</td>
<td>${v.sex}</td>
<td>${v.tel}</td>
<td><button class='btn11'>删除</button><button class='btn22'>修改</button></td>
</tr>`
});
tab.lastElementChild.lastElementChild.innerHTML = html;
}).catch(err => {
// 失败的回调
});
};
renderList();
// 搜索按钮
btn.addEventListener('click', function () {
// 获取ipt的value
let iptVal = ipt.value;
// axios方法
axios.get('http://162.14.107.109/show?id=' + ipt.value).then(res => {
// 成功的回调
console.log(res);
var stuList2 = res.data.data;
sou.lastElementChild.lastElementChild.innerHTML = `
<tr>
<td>${stuList2.id}</td>
<td>${stuList2.name}</td>
<td>${stuList2.age}</td>
<td>${stuList2.sex}</td>
<td>${stuList2.tel}</td>
<td><button class='btn11'>删除</button><button class='btn22'>修改</button></td>
`;
}).catch(err => {
// 失败的回调
});
iptVal.value = "";
});
// 搜索框里的按钮事件
sou.addEventListener('click', function (e) {
// 给删除添加点击事件
if (e.target.className == 'btn11') {
// 跳出弹窗
tan.style.display = "block";
// 同时修改按钮禁用
xiu.style.display = "none";
}
// 给修改添加点击事件
if (e.target.className == 'btn22') {
// 点击修改按钮显示修改弹窗
xiu.style.display = "block";
tan.style.display = "none";
axios.get(`http://162.14.107.109/update?id=${ipt.value}&name=${newName.value}`).then(res => {
// 成功的回调
console.log(res);
console.log(res.data.data);
var stuList5 = res.data.data.data;
newName.value = stuList5.name;
}).catch(err => {
// 失败的回调
});
}
});
// 给删除弹窗里的确认按钮添加点击事件
yes.addEventListener('click', function () {
tan.style.display = "none";
// 删除
});
// 给删除弹窗里的取消按钮添加点击事件
no.addEventListener('click', function () {
tan.style.display = "none";
});
// 点击确认修改按钮把修改的数据渲染到tr里面
btn3.addEventListener('click', function () {
xiu.style.display = "none";
axios.get(`http://162.14.107.109/update?id=${ipt.value}&name=${newName.value}`).then(res => {
// 成功的回调
console.log(res);
var stuList5 = res.data.data.data;
stuList5.name = newName.value;
}).catch(err => {
// 失败的回调
});
});
// 新增提交按钮
btn4.addEventListener('click', function () {
axios.get(`http://162.14.107.109/create?name=${ps[0].value}&age=${ps[1].value}&sex=${ps[2].value}&password=${ps[4].value}&tel=${ps[3].value}`).then(res => {
// 成功的回调
console.log(res);
var stuList5 = res.data.data.data;
res.data.data.removeChild(stuList5);
let stuList4 = JSON.parse(xhr.responseText).data;
ps[0].value = stuList4.name;
ps[1].value = stuList4.age;
ps[2].value = stuList4.sex;
ps[3].value = stuList4.passwords;
ps[4].value = stuList4.tel;
}).catch(err => {
// 失败的回调
});
}
);
</script>
</body>
</html>

复制代码