phuocntb/crud_student_manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
Nguyễn Phước
2026-05-29 21:48:54 +07:00
commit 38486911e2
6 changed files with 466 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
base.js Normal file
View File

@@ -0,0 +1,121 @@
/*
Quản lý student
*/
let countId = 0;
let students = [
{
id: -2,
name: "Phước",
age: 35,
isInLove: false,
gender: "male",
dob: "1985-12-11"
},
{
id: -1,
name: "Hương",
age: 25,
isInLove: true,
gender: "female",
dob: "1895-11-05"
}
]
const tbodyEL = document.querySelector("tbody")
const formEl = document.querySelector("form")
let editStudent = null;
function renderUi() {
let tbodyHtml = ``
students.forEach((value, key) => {
tbodyHtml += `
<tr>
<td>${key}</td>
<td>${value.id}</td>
<td>${value.name}</td>
<td>${value.age}</td>
<td>${value.isInLove ? "có" : "không"}</td>
<td>${value.gender}</td>
<td>${value.dob}</td>
<td>
<button onclick="deleteStudent(${value.id})">xóa</button>
<button onclick="setEditStudent(${value.id})">sửa</button>
</td>
</tr>
`
})
tbodyEL.innerHTML = tbodyHtml
formEl.querySelector("#form_title").innerHTML = editStudent ? "Sửa sinh viên" : "Thêm Sinh Viên"
if (editStudent) {
formEl.querySelectorAll("input")[0].value = editStudent.name;
formEl.querySelectorAll("input")[1].value = editStudent.age;
formEl.querySelectorAll("input")[editStudent.isInLove ? 2 : 3].checked = true;
let options = formEl.querySelectorAll("option");
for (op of options) {
if (op.value == editStudent.gender) {
op.selected = true;
break
}
}
formEl.querySelectorAll("input")[4].value = editStudent.dob;
}
}
function save(event) {
event.preventDefault();
let form = event.target;
let newStudent = {
id: editStudent ? editStudent.id : countId++,
name: form.name.value,
age: form.age.value,
isInLove: form.isInLove.value,
gender: form.gender.value,
dob: form.dob.value
}
if (editStudent) {
for (let i = 0; i < students.length; i++) {
if (students[i].id == editStudent.id) {
students[i] = newStudent
break
}
}
} else {
students.push(newStudent)
}
renderUi()
formEl.reset()
editStudent = null;
}
function deleteStudent(stuId) {
if (confirm("xác nhận xóa!")) {
students = students.filter(stu => stu.id != stuId)
}
renderUi()
}
function setEditStudent(stuId) {
editStudent = students.find(stu => stu.id == stuId)
renderUi()
}
renderUi()

54
for.js Normal file
View File

@@ -0,0 +1,54 @@
let employeeList = [
{
id: -1,
name: "Toàn",
age: 33,
gender: "male" // male, female, other
},
{
id: 0,
name: "Tiến",
age: 33,
gender: "male" // male, female, other
},
{
id: 1,
name: "Hải",
age: 33,
gender: "male" // male, female, other
}
]
function print() {
for(let i = 0; i < employeeList.length; i++) {
console.log(employeeList[i])
}
}
function logEmp(emp) {
console.log("emp", emp)
}
// employeeList.forEach(function logEmp(emp) {
// console.log("emp", emp)
// }
//)
employeeList.forEach(function (emp, index) {
console.log("emp", emp, index)
})
// employeeList.forEach((emp) => {
// console.log("emp", emp)
// })
// employeeList.forEach(emp => console.log("emp", emp))
// for(let emp of employeeList) {
// console.log("emp", emp)
// }
// for(let key in employeeList) {
// console.log("emp", employeeList[key])
// }

63
index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Local Storage</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>STT</th>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
<th>In Love</th>
<th>GENDER</th>
<th>DOB</th>
<th>TOOLS</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>-2</td>
<td>aasdsa</td>
<td>22</td>
<td>có</td>
<td>nam</td>
<td>11/11/11</td>
<td>
<button>xóa</button>
<button>sửa</button>
</td>
</tr> -->
</tbody>
</table>
<form onsubmit="save(event)" action="" style="border: 1px, solid black;">
<p id="form_title">Thêm Sinh Viên</p>
<input type="text" placeholder="name" name="name">
<br>
<input type="text" placeholder="age" name="age">
<br>
Trong tình yêu: Có <input type="radio" name="isInLove"> Không <input type="radio" name="isInLove">
<br>
<select name="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="other">other</option>
</select>
<br>
<input type="date" name="dob">
<button>lưu</button>
</form>
<script src="main.js"></script>
</body>
</html>

48
local-storage.js Normal file
View File

@@ -0,0 +1,48 @@
const employeeList = [
{
id: -1,
name: "Toàn",
age: 33,
gender: "male" // male, female, other
}
]
function showList() {
console.log("employeeList", employeeList)
}
function addNewEmployee() {
let newEmployee = {
id: 2,
name: "Hải",
age: 43,
gender: "female" // male, female, other
}
employeeList.push(newEmployee)
}
function setData() {
localStorage.setItem("employeeList", JSON.stringify(employeeList))
}
function readData() {
console.log(JSON.parse(localStorage.getItem("employeeList")))
}
localStorage.setItem("myName", "Phước")
console.log(localStorage.getItem("myName"))
localStorage.setItem("myAge", 27)
let myAge = localStorage.getItem("myAge")
console.log(+myAge)
setData()
readData()

128
main.js Normal file
View File

@@ -0,0 +1,128 @@
/*
Quản lý student
*/
let countId = 0;
let students = [
{
id: -2,
name: "Phước",
age: 35,
isInLove: false,
gender: "male",
dob: "1985-12-11"
},
{
id: -1,
name: "Hương",
age: 25,
isInLove: true,
gender: "female",
dob: "1895-11-05"
}
]
if(localStorage.getItem("students")) {
students = JSON.parse(localStorage.getItem("students"))
}
const tbodyEL = document.querySelector("tbody")
const formEl = document.querySelector("form")
let editStudent = null;
function renderUi() {
localStorage.setItem("students", JSON.stringify(students))
let tbodyHtml = ``
students.forEach((value, key) => {
tbodyHtml += `
<tr>
<td>${key}</td>
<td>${value.id}</td>
<td>${value.name}</td>
<td>${value.age}</td>
<td>${value.isInLove ? "có" : "không"}</td>
<td>${value.gender}</td>
<td>${value.dob}</td>
<td>
<button onclick="deleteStudent(${value.id})">xóa</button>
<button onclick="setEditStudent(${value.id})">sửa</button>
</td>
</tr>
`
})
tbodyEL.innerHTML = tbodyHtml
formEl.querySelector("#form_title").innerHTML = editStudent ? "Sửa sinh viên" : "Thêm Sinh Viên"
if (editStudent) {
formEl.querySelectorAll("input")[0].value = editStudent.name;
formEl.querySelectorAll("input")[1].value = editStudent.age;
formEl.querySelectorAll("input")[editStudent.isInLove ? 2 : 3].checked = true;
let options = formEl.querySelectorAll("option");
for (op of options) {
if (op.value == editStudent.gender) {
op.selected = true;
break
}
}
formEl.querySelectorAll("input")[4].value = editStudent.dob;
}
}
function save(event) {
event.preventDefault();
let form = event.target;
let newStudent = {
id: editStudent ? editStudent.id : countId++,
name: form.name.value,
age: form.age.value,
isInLove: form.isInLove.value,
gender: form.gender.value,
dob: form.dob.value
}
if (editStudent) {
for (let i = 0; i < students.length; i++) {
if (students[i].id == editStudent.id) {
students[i] = newStudent
break
}
}
} else {
students.push(newStudent)
}
renderUi()
formEl.reset()
editStudent = null;
}
function deleteStudent(stuId) {
if (confirm("xác nhận xóa!")) {
students = students.filter(stu => stu.id != stuId)
}
renderUi()
}
function setEditStudent(stuId) {
editStudent = students.find(stu => stu.id == stuId)
renderUi()
}
renderUi()

52
t.js Normal file
View File

@@ -0,0 +1,52 @@
let employeeList = [
{
id: -1,
name: "Toàn",
age: 33,
gender: "male" // male, female, other
},
{
id: 1,
name: "Tiến",
age: 33,
gender: "male" // male, female, other
},
{
id: 2,
name: "Hải",
age: 33,
gender: "male" // male, female, other
}
]
function deleteItem(id) {
// for(let i = 0; i < employeeList.length; i++) {
// if(id == employeeList[i].id) {
// employeeList.splice(i, 1)
// break
// }
// }
employeeList = employeeList.filter(em => em.id != id)
}
function findById(id, arr) {
// for (let i = 0; i < arr.length; i++) {
// if (id == arr[i].id) {
// return arr[i]
// }
// }
return arr.find(em => em.id == id)
}
let findEmp = findById(1, employeeList)
findEmp.age = 18
console.log("findEmp", findEmp)
console.log("employeeList", employeeList)