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