Не запутайтесь с художником, не запутайтесь~
Caiji написан для лучшего изучения JavaScript~
Текущие основные основные функции: информация о пользователе может быть добавлена, удалена, изменена, а требования к формату ввода не ограничены. , Код оптимизация тоже ох~
Картина следующая:
код обновлен, комментарии добавлены, багов нет, но относительно просто и сложно на данный момент.
<!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>用户管理页面</title>
<!-- <link rel="stylesheet" href="./css/Management.css"> -->
<style>
* {
padding: 0;
margin: 0;
}
.label {
position: absolute;
/* top: 0; */
left: 5%;
/* margin-bottom: 5px; */
font-weight: 600;
font-size: 20px;
}
.add-info {
position: absolute;
right: 5%;
margin-top: 30px;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
background-color: white;
/* align-items: center; */
}
.in-container {
width: 90%;
margin-top: 60px;
height: 580px;
border: 1px solid #b8b8b8;
box-shadow: inset 0 1px 2px rgb(0 0 0 / 13%);
overflow: hidden;
/* border: 1px solid black; */
}
.navgater {
width: 100%;
height: 40px;
border-bottom: 1px solid #b8b8b8;
box-shadow: inset 0 1px 2px rgb(0 0 0 / 13%);
background-color: rgb(245, 245, 242);
}
.nav-ul {
width: 70%;
}
.navgater ul {
list-style: none;
display: flex;
flex-direction: row;
}
.navgater ul li {
width: 25%;
line-height: 40px;
margin-left: 10px;
}
#main {
width: 100%;
height: 540px;
overflow: auto;
/* height: 90vh; */
}
.information {
width: 100%;
height: 60px;
border-bottom: 1px solid #b8b8b8;
display: flex;
justify-content: space-between;
}
.left-info {
width: 70%;
}
.right-info {
width: 30%;
line-height: 60px;
display: flex;
flex-direction: row-reverse;
}
.information ul {
list-style: none;
display: flex;
flex-direction: row;
}
.information ul li {
width: 25%;
line-height: 60px;
margin-left: 10px;
}
.right-info input {
margin-right: 10px;
margin-top: 18px;
height: 24px;
width: 32px;
}
.footer {
position: absolute;
width: 90%;
text-align: center;
/* margin-top: 10px; */
}
#add {
width: 250px;
height: 350px;
background-color: rgb(146, 171, 226);
position: absolute;
z-index: 100;
top: 50%;
left: 50%;
margin-left: -125px;
margin-top: -175px;
border-radius: 10px;
}
/* 信息修改框 */
.modify {
width: 250px;
height: 350px;
background-color: rgb(146, 171, 226);
position: absolute;
z-index: 100;
top: 50%;
left: 50%;
margin-left: -125px;
margin-top: -175px;
border-radius: 10px;
}
.title {
height: 30px;
line-height: 30px;
position: relative;
padding-left: 10px;
}
.close {
position: absolute;
width: 20px;
height: 30px;
right: 0;
cursor: pointer;
}
.modi-body {
display: flex;
flex-direction: column;
}
.input-text {
display: flex;
flex-direction: column;
width: 100%;
height: 70px;
align-items: center;
}
.input-text span {
align-self: start;
margin-left: 5px;
}
.input-text input {
height: 36px;
width: 96%;
border-radius: 3px;
font-size: 16px;
border: none;
outline: none;
}
.btn {
display: flex;
justify-content: space-between;
width: 100%;
}
.btn button {
width: 50px;
height: 30px;
margin-left: 30px;
margin-right: 30px;
}
.delete {
width: 240px;
height: 120px;
background-color: rgb(146, 171, 226);
position: absolute;
z-index: 100;
top: 50%;
left: 50%;
margin-left: -120px;
margin-top: -60px;
border-radius: 10px;
display: flex;
flex-direction: column;
}
.delete span {
margin-left: 5px;
margin-top: 5px;
}
.dele-btn {
width: 100%;
display: flex;
flex-direction: row-reverse;
margin-top: 55px;
}
.dele-btn button {
width: 50px;
height: 30px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="label">用户信息</div>
<button class="add-info">添加用户</button>
<div class="in-container">
<div class="navgater">
<ul class="nav-ul">
<li>用户名</li>
<li>用户id</li>
<li>职位</li>
<li>最近登录</li>
</ul>
</div>
<div id="main"></div>
<div class="footer">
<input type="button" value="上一页" onclick="">
<input type="button" value="下一页" onclick="">
</div>
</div>
</div>
</body>
<script>
// 动态创建用户信息----这里应该是点击添加按钮后添加用户信息。
function addInfo() {
this.obj = null;
}
addInfo.prototype.add = function() {
this.obj = document.createElement('div');
this.obj.id = 'add';
this.obj.innerHTML = `
<div class="title">
<span>添加用户</span>
<span class="close" onclick = "closeXx()">X</span>
</div>
<div class="modi-body">
<div class="input-text">
<span>用户名：</span>
<input type="text" id="name">
</div>
<div class="input-text">
<span>用户ID：</span>
<input type="text" id="id">
</div>
<div class="input-text">
<span>职位：</span>
<input type="text" id="position">
</div>
<div class="input-text">
<span>最近登录：</span>
<input type="text" id="time">
</div>
</div>
<div class="btn">
<button οnclick="closeXx()">取消</button>
<button οnclick="addPerson(),closeXx()">确定</button>
</div>
`
document.body.appendChild(this.obj);
}
// 关闭按钮函数
function closeXx() {
var a = document.getElementById('add');
a.remove(a.selectedIndex);
}
//获取按钮的name，添加弹出添加窗口
var add = document.getElementsByClassName('add-info');
add[0].addEventListener('click', function A() {
let d = new addInfo();
d.add();
})
// 点击确定按钮，添加新用户
// 获取main里面的所有子元素
var m = document.getElementById('main');
var nodes; //用来记录main里面的子元素，是个数组
// 对修改和删除两个按钮的点击方法赋值函数。
function addE(e) {
var infoD = document.getElementsByName('infoDelete');
for (let i = 0; i < e; i++) {
infoD[i].onclick = function() {
let d1 = new deleBox();
d1.creat(i);
};
var infoM = document.getElementsByName('infoModify');
infoM[i].onclick = function() {
let d2 = new box();
d2.creat(i);
};
}
}
// 定义的添加用户信息的函数
function addPerson() {
let person = {
name: "",
id: "",
position: "",
time: ""
}
person.name = document.getElementById('name').value;
person.id = document.getElementById('id').value;
person.position = document.getElementById('position').value;
person.time = document.getElementById('time').value;
function sub(e) {
var main = document.getElementById('main');
var per = document.createElement('div');
per.innerHTML = `
<div class="left-info">
<ul>
<li>${
person.name}</li>
<li>${
person.id}</li>
<li>${
person.position}</li>
<li>${
person.time}</li>
</ul>
</div>
<div class="right-info">
<input name="infoDelete" type="button" value="删除">
<input name="infoModify" type="button" value="修改">
</div>
`
per.className = "information";
main.appendChild(per);
}
if (person.name && person.id && person.position && person.time) {
sub(person);
} else {
alert("请输入相应数据");
}
// 点击函数的赋值
m = document.getElementById('main');
nodes = m.childNodes;
// 由于逻辑问题，这里定时将函数赋值上去。
var int = setInterval(function() {
if (nodes.length > 0) {
addE(nodes.length);
}
}, 100);
}
// 点击修改按钮后弹出的修改框,修改后并对函数实现函数赋值，这就是一个问题。
var mm = "modify"; //这里是对修改框的id加一个名字
function box() {
this.obj = null;
}
box.prototype.creat = function(e) {
this.obj = document.createElement('div');
this.obj.className = 'modify';
this.obj.id = mm + e; //这里加上传入的一个数字，用来区别点击不同按钮。
this.obj.innerHTML = `
<div class="title">
<span>修改信息</span>
<span class="close" onclick = "closeX()">X</span>
</div>
<div class="modi-body">
<div class="input-text">
<span>用户名：</span>
<input type="text" id="modi-name">
</div>
<div class="input-text">
<span>用户ID：</span>
<input type="text" id="modi-ID">
</div>
<div class="input-text">
<span>职位：</span>
<input type="text" id="modi-position">
</div>
<div class="input-text">
<span>最近登录：</span>
<input type="text" id="modi-time">
</div>
</div>
<div class="btn">
<button οnclick="closeX()">取消</button>
<button οnclick="modifyInfo(),closeX()"}">确定</button>
</div>
`
document.body.appendChild(this.obj);
}
// 点击后关闭弹窗
function closeX() {
var a = document.getElementsByClassName('modify');
a[0].remove(a.selectedIndex);
}
// 点击确定按钮后，传递相应的信息，修改用户信息
function modifyInfo() {
let n = replace('modify');
console.log(n)
for (let i = 0; i < nodes.length; i++) {
if (i == n) {
let m = document.getElementsByClassName('information');
let name = document.getElementById('modi-name').value;
let id = document.getElementById('modi-ID').value;
let position = document.getElementById('modi-position').value;
let time = document.getElementById('modi-time').value;
while (m[n].firstChild) {
m[n].removeChild(m[n].firstChild);
}
m[n].innerHTML = `
<div class="left-info">
<ul>
<li>${
name}</li>
<li>${
id}</li>
<li>${
position}</li>
<li>${
time}</li>
</ul>
</div>
<div class="right-info">
<input name="infoDelete" type="button" value="删除">
<input name="infoModify" type="button" value="修改">
</div>
`
}
}
}
// 点击删除按钮弹出删除弹窗部分
var nn = "delete"; //id加名字用
function deleBox() {
this.obj = null;
}
deleBox.prototype.creat = function(e) {
this.obj = document.createElement('div');
this.obj.className = 'delete';
this.obj.id = nn + e; //这里加上传入的一个数字，用来区别点击不同按钮。
this.obj.innerHTML = `
<span>确定删除？</span>
<div class="dele-btn">
<button οnclick="delet(),closeDele()">确定</button>
<button οnclick="closeDele()">取消</button>
</div>
`
document.body.appendChild(this.obj);
}
// 点击后关闭弹窗
function closeDele() {
var a = document.getElementsByClassName('delete');
a[0].remove(a.selectedIndex);
}
// 点击确定按钮后删除对应的数据项
function delet() {
let n = replace('delete');
for (let i = 0; i < nodes.length; i++) {
let node = nodes[i];
if (i == n) {
m.removeChild(node);
}
}
}
// 替换函数，将id后面的数字找出
function replace(e) {
addE(nodes.length);
let n = document.getElementsByClassName(e);
let n1 = n[0].id;
let n2 = n1.replace(e, '');
return n2;
}
</script>
</html>
Говорить дешево, покажите мне код —— Xinhuo Studio!