add
This commit is contained in:
Your Name
76
index.html
Normal file
76
index.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form onsubmit="save(event)">
|
||||
<h2>Thông Tin Học Viên</h2>
|
||||
<div>
|
||||
<span>Họ Và Tên </span>
|
||||
<input type="text" name="name">
|
||||
</div>
|
||||
<div>
|
||||
<span>Email</span>
|
||||
<input type="email" name="email">
|
||||
</div>
|
||||
<div>
|
||||
<span>Số Điện Thoại</span>
|
||||
<input type="text" name="phoneNumber">
|
||||
</div>
|
||||
<div>
|
||||
<span>Quê quán </span>
|
||||
<input type="text" name="address">
|
||||
</div>
|
||||
<div>
|
||||
<span>Giới Tính </span>
|
||||
Nam <input type="radio" name="gender" value="true">
|
||||
Nữ <input type="radio" name="gender" value="false">
|
||||
</div>
|
||||
<button>lưu</button>
|
||||
</form>
|
||||
|
||||
<input id="se_ip" type="text"> <button onclick="search()">search</button>
|
||||
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Họ Tên</th>
|
||||
<th>Email</th>
|
||||
<th>Điện Thoại</th>
|
||||
<th>Địa Chỉ</th>
|
||||
<th>Giới Tính</th>
|
||||
<th>Hành Động</th>
|
||||
<th>
|
||||
<button onclick="sapXep()">Sắp Xếp Alpha</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <tr>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
<button>Xóa</button>
|
||||
<button>Sửa</button>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr> -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
130
main.js
Normal file
130
main.js
Normal file
@@ -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)
|
||||
Reference in New Issue
Block a user