用户页面-页面进行增删改（html+css+js
*需求
*：在页面输入新用户信息，完成新增用户，点击删除按钮进行删除，点击修改按钮，弹出新的页面进行修改，保存修改后在页面显示。
修改：
代码展示：
html代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" rel="script" src="js/index.js">script>
<link type="text/css" href="./css/index.css" rel="stylesheet">
head>
<body>
<div id="top-add">
<form id="menu">
编号:<input type="text" id="id" class="input-text">
姓名:<input type="text" id="name" class="input-text">
年龄:<input type="text" id="age" class="input-text">
学科:<input type="text" id="discipline" class="input-text">
学分:<input type="text" id="score" class="input-text">
<input type="submit" id="add" value="添加" class="input-text">
form>
div>
<div id="men-table">
<table id="table-all" border="1" cellpadding="0">
<tr>
<th>编号th>
<th>姓名th>
<th>年龄th>
<th>学科th>
<th>学分th>
<th>操作th>
tr>
table>
div>
body>
html>
css代码：
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
#top-add{
background-color: #cecccc;
position: relative;
width: 80%;
height: 150px;
left: 10%;
text-align: center;
font-size: 25px;
top: 55px;
line-height: 150px;
}
.input-text{
width: auto;
height: 25px;
}
#add{
display: inline-block;
width: 80px;
height: 35px;
}
#table-all{
position: relative;
width: 80%;
height: auto;
left: 10%;
text-align: center;
top: 105px;
background-color: #63a35c;
font-size: 25px;
}
.button{
width: 55px;
height: auto;
font-size: 20px;
}
js代码
window.onload = function () {
//创建数组用来存取用户信息
var users = [];
//获取表单元素
var form = document.getElementById("menu");
var id = document.getElementById("id");
var name = document.getElementById("name");
var age = document.getElementById("age");
var discipline = document.getElementById("discipline");
var score = document.getElementById("score");
var submit = document.getElementById("add");
//监听表单提交事件
form.addEventListener("submit",function (event) {
event.preventDefault();//阻止表单默认提交
//获取输入用户的用户信息
var idValue = id.value;
var nameValue = name.value;
var ageValue = age.value;
var disciplineValue = discipline.value;
var scoreValue = score.value;
//创建用户对象
var user ={
id:idValue,
name:nameValue,
age:ageValue,
discipline:disciplineValue,
score:scoreValue
}
//将用户信息添加到数组中
users.push(user);
//情况表单输入
id.value = "";
name.value = "";
age.value = "";
discipline.value = "";
score.value = "";
//刷新表格
refreshTable()
});
//刷新表格
function refreshTable() {
var table = document.getElementById("table-all");
// 清空表格内容
table.innerHTML = "";
// 创建表头行
var headerRow = document.createElement("tr");
headerRow.innerHTML =
"编号 姓名 年龄 学分 学科 操作 ";
table.appendChild(headerRow);
//创建用户数据行
for (var i = 0; i < users.length; i++) {
var user = users[i];
//创建行单元格
var row = document.createElement("tr");
var idCell = document.createElement("td");
var nameCell = document.createElement("td");
var ageCell = document.createElement("td");
var subjectCell = document.createElement("td");
var creditCell = document.createElement("td");
var actionCell = document.createElement("td");
// 设置单元格内容
idCell.textContent = user.id;
nameCell.textContent = user.name;
ageCell.textContent = user.age;
subjectCell.textContent = user.discipline;
creditCell.textContent = user.score;
//创建修改和删除按钮
var editButton = document.createElement("button");
editButton.textContent = "修改";
editButton.className = "button";
editButton.addEventListener("click", function () {
editUser(user)
});
var deleteButton = document.createElement("button");
deleteButton.textContent = "删除";
deleteButton.className = "button";
deleteButton.addEventListener("click", function () {
deleteHandler(user)
});
// 将按钮添加到操作单元格中
actionCell.appendChild(editButton);
actionCell.appendChild(deleteButton);
// 将单元格添加到行中
row.appendChild(idCell);
row.appendChild(nameCell);
row.appendChild(ageCell);
row.appendChild(creditCell);
row.appendChild(subjectCell);
row.appendChild(actionCell);
// 将行添加到表格中
table.appendChild(row);
}
}
function deleteHandler(user) {
var indexOf = users.indexOf(user);
if (indexOf > -1){
users.splice(indexOf,1);
}
refreshTable();
}
function editUser(user) {
// 创建弹出页面
var editPage = window.open("", "Edit User", "width=400,height=400");
// 编辑页面的内容
var editPageContent =
"修改用户
" +
"" +
"
" +
"" +
"
" +
"" +
"
" +
"" +
"
" +
"" +
"
" +
"";
// 设置弹出页面的内容
editPage.document.body.innerHTML = editPageContent;
// 获取保存按钮元素
var saveButton = editPage.document.getElementById("saveButton");
// 为保存按钮绑定点击事件
saveButton.addEventListener("click", function() {
saveChanges(users.indexOf(user),editPage);
});
}
// 保存修改
function saveChanges(index,editPage) {
// 获取编辑页面的输入值
var editId = editPage.document.getElementById("editId").value;
var editName = editPage.document.getElementById("editName").value;
var editAge = editPage.document.getElementById("editAge").value;
var editDiscipline = editPage.document.getElementById("editDiscipline").value;
var editScore = editPage.document.getElementById("editScore").value;
// 更新对应索引的用户信息
var user = users[index];
user.id = editId;
user.name = editName;
user.age = editAge;
user.discipline = editDiscipline;
user.score = editScore;
// 关闭编辑页面
editPage.close();
// 刷新表格
refreshTable();
}
}