128 lines
2.9 KiB
JavaScript
128 lines
2.9 KiB
JavaScript
/*
|
|
|
|
Quản lý student
|
|
|
|
*/
|
|
let countId = 0;
|
|
|
|
let students = [
|
|
{
|
|
id: -2,
|
|
name: "Phước",
|
|
age: 35,
|
|
isInLove: false,
|
|
gender: "male",
|
|
dob: "1985-12-11"
|
|
},
|
|
{
|
|
id: -1,
|
|
name: "Hương",
|
|
age: 25,
|
|
isInLove: true,
|
|
gender: "female",
|
|
dob: "1895-11-05"
|
|
}
|
|
]
|
|
|
|
if(localStorage.getItem("students")) {
|
|
students = JSON.parse(localStorage.getItem("students"))
|
|
}
|
|
|
|
const tbodyEL = document.querySelector("tbody")
|
|
const formEl = document.querySelector("form")
|
|
|
|
let editStudent = null;
|
|
|
|
function renderUi() {
|
|
localStorage.setItem("students", JSON.stringify(students))
|
|
|
|
|
|
let tbodyHtml = ``
|
|
|
|
students.forEach((value, key) => {
|
|
tbodyHtml += `
|
|
<tr>
|
|
<td>${key}</td>
|
|
<td>${value.id}</td>
|
|
<td>${value.name}</td>
|
|
<td>${value.age}</td>
|
|
<td>${value.isInLove ? "có" : "không"}</td>
|
|
<td>${value.gender}</td>
|
|
<td>${value.dob}</td>
|
|
<td>
|
|
<button onclick="deleteStudent(${value.id})">xóa</button>
|
|
<button onclick="setEditStudent(${value.id})">sửa</button>
|
|
</td>
|
|
</tr>
|
|
`
|
|
})
|
|
|
|
tbodyEL.innerHTML = tbodyHtml
|
|
|
|
formEl.querySelector("#form_title").innerHTML = editStudent ? "Sửa sinh viên" : "Thêm Sinh Viên"
|
|
|
|
if (editStudent) {
|
|
formEl.querySelectorAll("input")[0].value = editStudent.name;
|
|
formEl.querySelectorAll("input")[1].value = editStudent.age;
|
|
formEl.querySelectorAll("input")[editStudent.isInLove ? 2 : 3].checked = true;
|
|
|
|
let options = formEl.querySelectorAll("option");
|
|
|
|
for (op of options) {
|
|
if (op.value == editStudent.gender) {
|
|
op.selected = true;
|
|
break
|
|
}
|
|
}
|
|
|
|
formEl.querySelectorAll("input")[4].value = editStudent.dob;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function save(event) {
|
|
event.preventDefault();
|
|
let form = event.target;
|
|
|
|
let newStudent = {
|
|
id: editStudent ? editStudent.id : countId++,
|
|
name: form.name.value,
|
|
age: form.age.value,
|
|
isInLove: form.isInLove.value,
|
|
gender: form.gender.value,
|
|
dob: form.dob.value
|
|
}
|
|
|
|
if (editStudent) {
|
|
for (let i = 0; i < students.length; i++) {
|
|
if (students[i].id == editStudent.id) {
|
|
students[i] = newStudent
|
|
break
|
|
}
|
|
}
|
|
} else {
|
|
students.push(newStudent)
|
|
}
|
|
|
|
|
|
renderUi()
|
|
formEl.reset()
|
|
editStudent = null;
|
|
}
|
|
|
|
function deleteStudent(stuId) {
|
|
if (confirm("xác nhận xóa!")) {
|
|
students = students.filter(stu => stu.id != stuId)
|
|
}
|
|
|
|
renderUi()
|
|
}
|
|
|
|
function setEditStudent(stuId) {
|
|
editStudent = students.find(stu => stu.id == stuId)
|
|
|
|
renderUi()
|
|
}
|
|
|
|
renderUi() |