By GokiSoft.com| 09:55 22/01/2021|
Học JS

[Share Code] Quản lý sinh viên - Lập trình HTML/CSS/JS 



- Thao tac len Tag (JS)
	- doc dc du lieu tu form input
	- object & array
	- function
	- event
	- insert (chen) 1 doan code html -> vao the khac -> su dung js
	- JSON
- JSON (json string)
	- decode: convert json string -> object (array)
	- encode: convert object (array) -> json string

-------------------------------------------------------------------
Chương trình quản lý sinh viên
- Form đăng ký tài khoản
- Hiển thị danh sách, thêm, sửa, xóa, lưu vào localStorage




#vidu.html


<!DOCTYPE html>
<html>
<head>
	<title>Javascript tutorial</title>
	<meta charset="utf-8">

	<style type="text/css">
		.table {
			margin: 0px auto;
			width: 60%;
			padding: 10px;
		}

		.form-group {
			display: block;
		}

		.form-group label {
			display: block;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.form-group input {
			display: block;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="table">
		<form method="post" onsubmit="return addStudent()">
			<div class="form-group">
				<label>Fullname:</label>
				<input required="true" type="text" name="fname" id="fullname">
			</div>
			<div class="form-group">
				<label>Email:</label>
				<input required="true" type="email" name="email" id="emailAddress">
			</div>
			<div class="form-group">
				<label>Address:</label>
				<input required="true" type="text" name="addr" id="address">
			</div>
			<button>Add Student</button>
			<button type="reset">Reset</button>
		</form>

		<table border="1" cellspacing="1" cellpadding="1" style="margin-top: 20px;">
			<thead>
				<tr>
					<th>No</th>
					<th>Fullname</th>
					<th>Email</th>
					<th>Address</th>
					<th></th>
					<th></th>
				</tr>
			</thead>
			<tbody id="result">
			</tbody>
		</table>
	</div>

	<script type="text/javascript">
		var resultTag = document.getElementById('result')
		var studentList = []
		var currentIndex = -1
		
		function addStudent() {
			//doc dc du lieu tu form
			fnameTag = document.getElementById('fullname')
			fullnameValue = fnameTag.value

			emailValue = document.getElementById('emailAddress').value
			addressValue = document.getElementById('address').value

			var std = {
				'fullname': fullnameValue,
				'email': emailValue,
				'address': addressValue
			}

			if(currentIndex == -1) {
				studentList.push(std)
			} else {
				studentList[currentIndex] = std
				currentIndex = -1
			}

			showStudentList()

			document.getElementById('fullname').value = ''
			document.getElementById('emailAddress').value = ''
			document.getElementById('address').value = ''

			return false;
		}

		function showStudentList() {
			resultTag.innerHTML = ''

			for (var i = 0; i < studentList.length; i++) {
				resultTag.innerHTML += `
					<tr>
						<td>${i+1}</td>
						<td>${studentList[i].fullname}</td>
						<td>${studentList[i].email}</td>
						<td>${studentList[i].address}</td>
						<td><button style="background-color: orange" onclick="editStudent(${i})">Edit</button></td>
						<td><button style="background-color: red" onclick="deleteStudent(${i})">Delete</button></td>
					</tr>`
			}
		}

		function editStudent(index) {
			currentIndex = index

			document.getElementById('fullname').value = studentList[index].fullname
			document.getElementById('emailAddress').value = studentList[index].email
			document.getElementById('address').value = studentList[index].address
		}

		function deleteStudent(index) {
			studentList.splice(index, 1)
			showStudentList()
		}
	</script>
</body>
</html>


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)