[Share Code] Tìm hiểu selector trong jQuery - append - prepend - html() trong jQuey

#vidu.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">
		  	<div class="form-group group-username">
		  		<label for="username">User Name:</label>
		  		<input type="text" name="name_username" id="username" class="form-control">
		  	</div>
		  	<div class="form-group group-fullname">
		  		<label for="fullname">Full Name:</label>
		  		<input type="text" name="name_fullname" id="fullname" class="form-control">
		  	</div>
		  	<div class="form-group">
		  		<label for="email">Email:</label>
		  		<input 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>
		  </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></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<!-- Insert html vao day -> row -> 1 user -->
			</tbody>
		</table>
	</div>

	<script type="text/javascript">
		// $(document).ready(function() {
		// 	// cach viet day du.
		// })

		$(function() {
			//jQuery -> Javascript -> function -> code js nhanh hon
			console.log('Test ... jquery ...')
			// code js
			// document.getElementById('username').value = 'TRAN VAN DIEP' //Rat hiem khi code bang js
			// document.getElementById('username').style.color = 'red'
			// convert sang jquery (js)
			$('#fullname').val('TRAN VAN DIEP')
			$('#username').val('dieptv')
			//#fullname => goi la selector => tag name, id, class, property
			// Tuong tac bang tag name
			// $('input').val('123')
			$('.btn-success').html('Luu Du Lieu')
			$('.btn-warning').html('Xoa Du Lieu')

			$('[for=email]').html('E-Mail:')

			// Sua css -> color, font-size, ...
			$('[for=email]').css('color', 'red')

			// Tac dung jQuery ho tro
			$('.group-fullname input').css('color', 'red')

			$('#btn_save').click(function() {
				// khi nguoi dung click vao save
				console.log('save ...')
				saveData()
			})

			$('#btn_reset').click(function() {
				resetData()
			})
		})

		var count = 0
		// array - object - json - localStorage => phat trien 1 web nhieu chuc nang => next lesson
		function saveData() {
			var username = $('#username').val()
			var fullname = $('#fullname').val()
			var email = $('#email').val()
			var birthday = $('#birthday').val()

			console.log('username: ' + username)
			console.log('fullname: ' + fullname)
			console.log('email: ' + email)
			console.log('birthday: ' + birthday)

			//append -> prepend
			count++;
			$('table tbody').append(`<tr id="item_${count}">
					<td>${count}</td>
					<td>${username}</td>
					<td>${fullname}</td>
					<td>${email}</td>
					<td>${birthday}</td>
					<td><button class="btn btn-warning">Edit</button></td>
					<td><button class="btn btn-danger" onclick="deleteItem('item_${count}')">Delete</button></td>
				</tr>`)

			resetData()
		}

		function resetData() {
			$('#username').val('')
			$('#fullname').val('')
			$('#email').val('')
			$('#birthday').val('')
		}

		function deleteItem(id) {
			count--
			$('#'+id).remove()
		}
	</script>
</body>
</html>

[Share Code] Tìm hiểu selector trong jQuery - append - prepend - html() trong jQuey

#vidu.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 đó