By GokiSoft.com| 10:07 24/12/2021|
Học JS

[Video] Chương trình quản lý sinh viên bằng JS - Khóa học lập trình JS


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Javascript for beginer</title>

	<style type="text/css">
		.container {
			width: 600px;
			background-color: #b2f0f7;
			margin: 0px auto;
			padding: 10px;
			margin-bottom: 20px;
		}

		.container label, .container input {
			width: 98%;
			margin-bottom: 10px;
			font-size: 22px;
		}

		.container button {
			margin-bottom: 10px;
			font-size: 22px;
		}
	</style>
</head>
<body>
<div class="container">
	<form method="post" onsubmit="return saveData()">
		<label>Full Name: </label>
		<input required type="text" name="fullname" id="fullname_id" minlength="3">
		<label>Age: </label>
		<input required type="text" name="age" id="age_id" pattern="[0-9]{1,2}">
		<label>Email: </label>
		<input required type="email" name="email" id="email_id">
		<label>Address: </label>
		<input required type="text" name="address" id="address_id">
		<button type="submit">Save</button>
		<button type="reset">Reset</button>
	</form>
</div>

<div class="container">
	<table border="1" cellpadding="5" style="width: 100%">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Age</th>
				<th>Email</th>
				<th>Address</th>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody id="result"></tbody>
	</table>
</div>

<script type="text/javascript">
	var count = 0
	var studentList = []
	var currentIndex = -1
	// Validate du lieu
	// C1. JS -> kiem tra cac dieu kien tren -> code phuc tap hon
	// C2. Tan dung support form -> da validate du lieu roi
	function saveData() {
		// Ket qua inputTags -> Array object
		// var inputTags = document.getElementsByTagName('input')
		/** var inputTags = document.getElementsByName('fullname')
		console.log('length: ' + inputTags.length)
		for (var i = 0; i < inputTags.length; i++) {
			var tag = inputTags[i]
			console.log(tag.value)
		}*/

		//Mapping tag html <-> var in javascript
		var nameTag = document.getElementById('fullname_id')
		var ageTag = document.getElementById('age_id')
		var emailTag = document.getElementById('email_id')
		var addressTag = document.getElementById('address_id')

		//Lay gia tri trong input
		var fullname = nameTag.value
		var age = ageTag.value
		var email = emailTag.value
		var address = addressTag.value

		var std = {
			"fullname": fullname,
			"age": age,
			"email": email,
			"address": address
		}

		if(currentIndex >= 0) {
			//update
			studentList[currentIndex] = std
			currentIndex = -1
		} else {
			studentList.push(std)
		}
		
		//Hien thi log du lieu
		console.log(studentList)

		// innerHTML -> HOAT DONG CHINH XAC vs tat ca cac the -> luu y: input -> ko dung innerHTML (value)
		//var resultTag = document.getElementById('result')
		//resultTag.innerHTML = fullname
		//resultTag.innerHTML += fullname
		/**resultTag.innerHTML += `<tr>
				<td>${count + 1}</td>
				<td>${fullname}</td>
				<td>${age}</td>
				<td>${email}</td>
				<td>${address}</td>
				<td><button onclick="editStudent(${count})">Edit</button></td>
				<td><button onclick="removeStudent(${count})">Remove</button></td>
			</tr>`
		count++
		*/
		showStudent()
		return false
	}

	function removeStudent(index) {
		option = confirm('Are you sure to remove the student?')
		if(!option) return

		studentList.splice(index, 1)

		showStudent()
	}

	function editStudent(index) {
		currentIndex = index
		std = studentList[index]

		//Mapping tag html <-> var in javascript
		var nameTag = document.getElementById('fullname_id')
		var ageTag = document.getElementById('age_id')
		var emailTag = document.getElementById('email_id')
		var addressTag = document.getElementById('address_id')

		nameTag.value = std.fullname
		ageTag.value = std.age
		emailTag.value = std.email
		addressTag.value = std.address
	}

	function showStudent() {
		var resultTag = document.getElementById('result')
		resultTag.innerHTML = ''

		for (var i = 0; i < studentList.length; i++) {
			std = studentList[i]

			resultTag.innerHTML += `<tr>
				<td>${i + 1}</td>
				<td>${std.fullname}</td>
				<td>${std.age}</td>
				<td>${std.email}</td>
				<td>${std.address}</td>
				<td><button onclick="editStudent(${i})">Edit</button></td>
				<td><button onclick="removeStudent(${i})">Remove</button></td>
			</tr>`
		}
	}
</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)

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

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