130 lines
3.1 KiB
JavaScript
130 lines
3.1 KiB
JavaScript
let countId = 0;
|
|
let students = [
|
|
{
|
|
id: -1,
|
|
name: "NTB Phước",
|
|
email: "a@g.c",
|
|
phoneNumber: "0329577177",
|
|
address: "HCM",
|
|
gender: true
|
|
}
|
|
]
|
|
|
|
if(localStorage.getItem("students")) {
|
|
students = JSON.parse(localStorage.getItem("students"))
|
|
}
|
|
|
|
|
|
const tbodyEL = document.querySelector("tbody");
|
|
const se_ipEL = document.querySelector("#se_ip");
|
|
|
|
let studentEdit = null;
|
|
|
|
function renderUi(arrStu) {
|
|
let tbodyHtml = ``;
|
|
|
|
for (let i = 0; i < arrStu.length; i++) {
|
|
tbodyHtml += `
|
|
<tr>
|
|
<td>${arrStu[i].id}</td>
|
|
<td>${arrStu[i].name}</td>
|
|
<td>${arrStu[i].email}</td>
|
|
<td>${arrStu[i].phoneNumber}</td>
|
|
<td>${arrStu[i].address}</td>
|
|
<td>${arrStu[i].gender ? "nam" : "nữ"}</td>
|
|
<td>
|
|
<button onclick="deleteStu(${arrStu[i].id})">Xóa</button>
|
|
<button onclick="editLoad(${arrStu[i].id})">Sửa</button>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
`
|
|
}
|
|
|
|
tbodyEL.innerHTML = tbodyHtml
|
|
|
|
if (studentEdit) {
|
|
let formEdit = document.querySelector("form");
|
|
formEdit.querySelectorAll("input")[0].value = studentEdit.name;
|
|
formEdit.querySelectorAll("input")[1].value = studentEdit.email;
|
|
formEdit.querySelectorAll("input")[2].value = studentEdit.phoneNumber;
|
|
formEdit.querySelectorAll("input")[3].value = studentEdit.address;
|
|
formEdit.querySelectorAll("input")[studentEdit.gender ? 4 : 5].checked = true;
|
|
}
|
|
|
|
localStorage.setItem("students", JSON.stringify(students))
|
|
}
|
|
|
|
|
|
function save(e) {
|
|
e.preventDefault()
|
|
|
|
const form = e.target;
|
|
|
|
let newStudent = {
|
|
id: studentEdit ? studentEdit.id : countId++,
|
|
name: form.name.value,
|
|
email: form.email.value,
|
|
phoneNumber: form.phoneNumber.value,
|
|
address: form.address.value,
|
|
gender: form.gender.value == "true" ? true : false
|
|
}
|
|
|
|
if (studentEdit) {
|
|
for (let i = 0; i < students.length; i++) {
|
|
if (students[i].id == studentEdit.id) {
|
|
students[i] = newStudent;
|
|
break
|
|
}
|
|
}
|
|
studentEdit = null;
|
|
form.reset()
|
|
} else {
|
|
students.push(newStudent)
|
|
}
|
|
|
|
|
|
renderUi(students);
|
|
}
|
|
|
|
function deleteStu(stuId) {
|
|
for (let i = 0; i < students.length; i++) {
|
|
if (students[i].id == stuId) {
|
|
students.splice(i, 1)
|
|
break
|
|
}
|
|
}
|
|
renderUi(students)
|
|
}
|
|
|
|
function search() {
|
|
let textSe = se_ipEL.value;
|
|
|
|
let kq = [];
|
|
|
|
for (let i = 0; i < students.length; i++) {
|
|
if (students[i].name.includes(textSe)) {
|
|
kq.push(students[i])
|
|
}
|
|
}
|
|
|
|
renderUi(kq)
|
|
|
|
}
|
|
|
|
function sapXep() {
|
|
renderUi(students.sort((a, b) => a.name.localeCompare(b.name)))
|
|
}
|
|
|
|
|
|
function editLoad(stuId) {
|
|
for (let i = 0; i < students.length; i++) {
|
|
if (students[i].id == stuId) {
|
|
studentEdit = students[i];
|
|
}
|
|
}
|
|
renderUi(students)
|
|
}
|
|
|
|
renderUi(students) |