From 42f25fea010ce6ce8bfd3908d7da21aef6bf2263 Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 5 Jun 2026 21:54:56 +0700 Subject: [PATCH] add --- index.html | 76 +++++++++++++++++++++++++++++++ main.js | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 206 insertions(+) create mode 100644 index.html create mode 100644 main.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..9f89537 --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + + Document + + + + +
+

Thông Tin Học Viên

+
+ Họ Và Tên + +
+
+ Email + +
+
+ Số Điện Thoại + +
+
+ Quê quán + +
+
+ Giới Tính + Nam + Nữ +
+ +
+ + + + + + + + + + + + + + + + + + + + +
#Họ TênEmailĐiện ThoạiĐịa ChỉGiới TínhHành Động + +
+ + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..95e3fae --- /dev/null +++ b/main.js @@ -0,0 +1,130 @@ +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 += ` + + ${arrStu[i].id} + ${arrStu[i].name} + ${arrStu[i].email} + ${arrStu[i].phoneNumber} + ${arrStu[i].address} + ${arrStu[i].gender ? "nam" : "nữ"} + + + + + + + + ` + } + + 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) \ No newline at end of file