91 lines
1.9 KiB
JavaScript
91 lines
1.9 KiB
JavaScript
let userList = [
|
|
{
|
|
id: -1,
|
|
name: "Phước",
|
|
gender: "female", // male, female, other
|
|
dob: "07/22/2026"
|
|
}
|
|
]
|
|
|
|
if(!localStorage.getItem("userList")) { // kiểm tra local có hay chưa
|
|
/* nếu chưa set lên */
|
|
localStorage.setItem("userList", JSON.stringify(userList))
|
|
}else {
|
|
/* nếu rồi lấy về lưu vào data userList */
|
|
userList = JSON.parse(localStorage.getItem("userList"))
|
|
}
|
|
|
|
const table_data_box_el = document.querySelector("#table_data_box");
|
|
|
|
|
|
|
|
function renderUi() {
|
|
|
|
let data_html = ""
|
|
|
|
for (let i = 0; i < userList.length; i++) {
|
|
console.log("userList", userList[i])
|
|
data_html += `
|
|
<tr>
|
|
<td>${i + 1}</td>
|
|
<td>${userList[i].name}</td>
|
|
<td>${getGenderText(userList[i].gender)}</td>
|
|
<td>${userList[i].dob}</td>
|
|
<td>
|
|
<button onclick="deleteUser(${userList[i].id})">Xóa</button>
|
|
</td>
|
|
</tr>
|
|
`
|
|
}
|
|
|
|
|
|
table_data_box_el.innerHTML = data_html
|
|
|
|
localStorage.setItem("userList", JSON.stringify(userList))
|
|
}
|
|
|
|
function save(e) {
|
|
e.preventDefault() // hủy hình vi call action mặc định của form
|
|
|
|
let formEL = e.target;
|
|
|
|
let newUser = {
|
|
id: Date.now(),
|
|
name: formEL.name.value,
|
|
gender: formEL.gender.value,
|
|
dob: formEL.dob.value,
|
|
}
|
|
|
|
console.log("newUser", newUser)
|
|
|
|
userList.push(newUser)
|
|
|
|
renderUi()
|
|
}
|
|
|
|
function deleteUser(userId) {
|
|
for (let i = 0; i < userList.length; i++) {
|
|
if(userList[i].id == userId) {
|
|
userList.splice(i, 1)
|
|
break
|
|
}
|
|
}
|
|
|
|
renderUi()
|
|
}
|
|
|
|
/* helper function */
|
|
function getGenderText(genderCode) {
|
|
switch (genderCode) {
|
|
case "male":
|
|
return "nam"
|
|
case "female":
|
|
return "nữ"
|
|
default:
|
|
return "Khác"
|
|
}
|
|
}
|
|
|
|
|
|
renderUi()
|