By GokiSoft.com| 14:57 07/01/2021|
Học JQuery

[Share Code] Tìm hiểu jQuery + Bootstrap - Lập trình jQuery/Bootstrap

#vidu.html


<!DOCTYPE html>
<html>
<head>
	<title>Registation Form * Form Tutorial</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h2 class="text-center">Registation Form - Input User's Detail Information</h2>
			</div>
			<div class="panel-body">
				<form method="post" id="MyForm">
					<div class="form-group">
					  <label for="usr">Name:</label>
					  <input required="true" type="text" class="form-control" id="usr" name="name">
					</div>
					<div class="form-group">
					  <label for="email">Email:</label>
					  <input required="true" type="email" class="form-control" id="email" name="email">
					</div>
					<div class="form-group">
					  <label for="birthday">Birthday:</label>
					  <input required="true" type="date" class="form-control" id="birthday" name="birthday">
					</div>
					<div class="form-group">
					  <label for="address">Address:</label>
					  <input required="true" type="text" class="form-control" id="address" name="address">
					</div>
					<button class="btn btn-success" id="save_btn" type="submit">Save</button>
					<button class="btn btn-warning" id="reset_btn" type="reset">Reset</button>
				</form>

				<div class="row">
					<div class="col-xs-3">
						
					</div>
					<div class="col-md-3">
						
					</div>
					<div class="col-md-3">
						
					</div>
					<div class="col-md-3">
						
					</div>
				</div>
			</div>
		</div>

		<div class="panel panel-primary">
			<div class="panel-heading">
				<h2 class="text-center">User List</h2>
			</div>
			<div class="panel-body">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>No</th>
							<th>Name</th>
							<th>Email</th>
							<th>Birthday</th>
							<th>Address</th>
							<th width="50px"></th>
							<th width="50px"></th>
						</tr>
					</thead>
					<tbody id="result">
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		// $(document).ready(function() {
		// 	//code => Khi website load thanh cong HTML
		// })

		var dataList = []

		$(function() {
			//code => Khi website load thanh cong HTML
			// $('#usr').click(function() {
			// 	console.log('click')
			// })
			// $('#usr').on('click', function() {
			// 	console.log('click')
			// })

			// $('#usr').change(function() {
			// 	console.log('change')
			// })

			// $('#usr').keyup(function() {
			// 	console.log('on key up')
			// })

			$('#MyForm').submit(function() {
				//Lay du lieu tu form
				var name = $('#usr').val()
				var email = $('#email').val()
				var birthday = $('#birthday').val()
				var address = $('#address').val()

				var user = {
					'name_param': name,
					'email_param': email,
					'birthday_param': birthday,
					'address_param': address
				}

				if(currentIndex >= 0) {
					//edit
					dataList[currentIndex] = user
					currentIndex = -1
				} else {
					dataList.push(user)
				}

				showData()

				$('#reset_btn').click()

				return false;
			})
		})

		function showData() {
			// $('#result').html('')
			$('#result').empty()
			for (var i = 0; i < dataList.length; i++) {
				$('#result').append(`<tr>
							<td>${i+1}</td>
							<td>${dataList[i].name_param}</td>
							<td>${dataList[i].email_param}</td>
							<td>${dataList[i].birthday_param}</td>
							<td>${dataList[i].address_param}</td>
							<td><button class="btn btn-warning" onclick="editUser(${i})">Edit</button></td>
							<td><button class="btn btn-danger" onclick="deleteUser(${i})">Delete</button></td>
						</tr>`)
			}
		}

		var currentIndex = -1
		function editUser(index) {
			currentIndex = index
			$('#usr').val(dataList[index].name_param)
			$('#email').val(dataList[index].email_param)
			$('#birthday').val(dataList[index].birthday_param)
			$('#address').val(dataList[index].address_param)
		}

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

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

		var str = "Sinh vien aptech"
		var str2 = " ABC"
		console.log(str.concat(str2))
		console.log(str.charAt(2))
		console.log(str.substr(2, 5))
	</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 đó