add
This commit is contained in:
121
base.js
Normal file
121
base.js
Normal 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
54
for.js
Normal 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
63
index.html
Normal 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
48
local-storage.js
Normal 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
128
main.js
Normal 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
52
t.js
Normal 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)
|
||||
Reference in New Issue
Block a user