add

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 += `
+            <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)