[Share Code] Chương trình quản lý sinh viên - Lập trình Bô

#test.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$
<!DOCTYPE html>
<html>
<head>
	<title>jQuery tutorial</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- Thiet ke 1 form -> dang ky tai khoan user -->
	<div class="container">
		<div class="card">
		  <div class="card-header bg-success text-light">
		  	Dang Ky Tai Khoan User
		  </div>
		  <div class="card-body">
		  	<form method="post" id="MyForm">
		  		<div class="form-group group-username">
			  		<label for="username">User Name:</label>
			  		<input required="true" type="text" name="name_username" id="username" class="form-control">
			  	</div>
			  	<div class="form-group group-fullname">
			  		<label for="fullname">Full Name:</label>
			  		<input required="true" type="text" name="name_fullname" id="fullname" class="form-control">
			  	</div>
			  	<div class="form-group">
			  		<label for="email">Email:</label>
			  		<input required="true" type="email" name="name_email" id="email" class="form-control">
			  	</div>
			  	<div class="form-group">
			  		<label for="birthday">Birthday:</label>
			  		<input type="date" name="name_birthday" id="birthday" class="form-control">
			  	</div>
			  	<button type="submit" class="btn btn-success" id="btn_save">Save</button>
			  	<button type="reset" class="btn btn-warning" id="btn_reset">Reset</button>
		  	</form>
		  </div>
		</div>

		<table class="table table-bordered" style="margin-top: 20px">
			<thead>
				<tr class="bg-success">
					<th>No</th>
					<th>User Name</th>
					<th>Full Name</th>
					<th>Email</th>
					<th>Birthday</th>
					<th width="50"></th>
					<th width="50"></th>
				</tr>
			</thead>
			<tbody id="student_list_id">
				<!-- Insert html vao day -> row -> 1 user -->
				
			</tbody>
		</table>
	</div>

	<script type="text/javascript">
		var studentList = []
		var currentIndex = -1

		var json = localStorage.getItem('stdList')
		if(json != null && json != '') {
			studentList = JSON.parse(json)

			showData()
		}

		$('#MyForm').submit(function() {
			console.log('okok')
			//Save thong tin sinh vien
			var uname = $('#username').val()
			var fname = $('#fullname').val()
			var email = $('#email').val()
			var birthday = $('#birthday').val()

			//Tao 1 object tu du lieu tren
			var std = {
				'username': uname,
				'fullname': fname,
				'email': email,
				'birthday': birthday
			}

			//Them doi tuong sinh vien std vao mang studentList
			if(currentIndex >= 0) {
				//Sua du lieu
				studentList[currentIndex] = std;
				currentIndex = -1
			} else {
				studentList.push(std)
			}

			//Hien thi du lieu len table
			// $('#student_list_id').append(`<tr>
			// 		<td>${studentList.length}</td>
			// 		<td>${std.username}</td>
			// 		<td>${std.fullname}</td>
			// 		<td>${std.email}</td>
			// 		<td>${std.birthday}</td>
			// 		<td><button class="btn btn-warning" onclick="editStudent(${studentList.length - 1})">Edit</button></td>
			// 		<td><button class="btn btn-danger" onclick="deleteStudent(${studentList.length - 1})">Delete</button></td>
			// 	</tr>`)
			showData()

			$('#btn_reset').click() //Click tu dong vao button reset -> xoa du lieu trong form di.
			return false;
		})

		function editStudent(index) {
			currentIndex = index

			var std = studentList[index]

			$('#username').val(std.username)
			$('#fullname').val(std.fullname)
			$('#email').val(std.email)
			$('#birthday').val(std.birthday)
		}

		function deleteStudent(index) {
			var option = confirm('Ban co chac chan muon xoa sinh vien nay khong?')
			if(!option) return

			studentList.splice(index, 1)
			
			showData()
		}

		function showData() {
			//Hien thi lai danh sach sinh vien trong mang studentList
			$('#student_list_id').empty()
			//Hien thi lai danh sach sinh vien
			for (var i = 0; i < studentList.length; i++) {
				$('#student_list_id').append(`<tr>
					<td>${i+1}</td>
					<td>${studentList[i].username}</td>
					<td>${studentList[i].fullname}</td>
					<td>${studentList[i].email}</td>
					<td>${studentList[i].birthday}</td>
					<td><button class="btn btn-warning" onclick="editStudent(${i})">Edit</button></td>
					<td><button class="btn btn-danger" onclick="deleteStudent(${i})">Delete</button></td>
				</tr>`)
			}

			//Luu tru du lieu lai
			//convert stdList array -> json string
			var json = JSON.stringify(studentList)
			//Save
			localStorage.setItem('stdList', json)
		}
	</script>
</body>
</html>
[Share Code] Chương trình quản lý sinh viên - Lập trình Bô

#test.html

Tags:

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

5

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó
