By GokiSoft.com| 18:27 27/10/2023|
Học JS

[Share Code] Tìm chèn tags vào trong HTML - C2307L

#vidu.html

	<!DOCTYPE html>
	<html>
	<head>
		<title>Javascript tutorial</title>
		<meta charset="utf-8">
		<style type="text/css">
			.panel {
				width: 600px;
				margin: 0px auto;
				border: solid #2196f3 2px;
			}

			.panel .panel-heading {
				background-color: #2196f3;
				color: white;
				font-size: 18px;
				font-weight: bold;
				padding: 10px;
			}

			.panel .panel-body {
				padding: 10px;
			}

			.group-control {
				margin-bottom: 15px;
			}

			.group-control label {
				width: 120px;
				float: left;
				text-align: right;
				padding-right: 10px;
			}

			.group-control input {
				font-size: 16px;
				padding: 5px;
				width: 360px;
			}

			.btn {
				font-size: 16px;
				padding: 8px;
				border: none;
				border-radius: 25px;
				cursor: pointer;
			}

			.btn-success {
				background-color: blue;
				color: white;
			}

			.btn-warning {
				background-color: orange;
			}

			.btn:hover {
				background-color: lightgreen;
				color: black;
			}
		</style>
	</head>
	<body>
	<div class="panel">
		<div class="panel-heading">
			Register
		</div>
		<div class="panel-body">
			<div class="group-control">
				<label>Full Name: </label>
				<input type="text" name="fullname" class="form-control" placeholder="Enter fullname" id="fullname_id" style="color: blue; font-size: 20px;">
			</div>
			<div class="group-control">
				<label>Email: </label>
				<input type="email" name="email" class="form-control" placeholder="Enter email" id="email_id">
			</div>
			<div class="group-control">
				<label>Address: </label>
				<input type="text" name="address" class="form-control" placeholder="Enter address" id="address_id">
			</div>
			<div class="group-control">
				<label>&nbsp;</label>
				<button class="btn btn-success" onclick="saveData()">Save Data</button>
				<button class="btn btn-warning" onclick="resetData()">Reset</button>
			</div>
		</div>
	</div>

	<div class="panel" style="margin-top: 20px;">
		<div class="panel-heading">
			User Management
		</div>
		<div class="panel-body">
			<table border="1" style="width: 100%" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th>No</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Address</th>
						<th></th>
					</tr>
				</thead>
				<tbody id="data-table">
					
				</tbody>
			</table>
		</div>
	</div>

	<script type="text/javascript">
		var fullnameTag = document.getElementById('fullname_id')
		var emailTag = document.getElementById('email_id')
		var addressTag = document.getElementById('address_id')
		var dataTable = document.getElementById('data-table')
		var count = 0

		var userList = []

		function saveData() {
			let fullname = fullnameTag.value
			let email = emailTag.value
			let address = addressTag.value

			userList.push({
				'fullname': fullname,
				'email': email,
				'address': address
			})
			console.log(userList)

			// dataTable.innerHTML += `<tr>
			// 		<td>${++count}</td>
			// 		<td>${fullname}</td>
			// 		<td>${email}</td>
			// 		<td>${address}</td>
			// 		<td><button>Delete</button></td>
			// 	</tr>`

			showDataTable()
		}

		function showDataTable() {
			dataTable.innerHTML = ''

			for (var i = 0; i < userList.length; i++) {
				dataTable.innerHTML += `<tr>
					<td>${i+1}</td>
					<td>${userList[i].fullname}</td>
					<td>${userList[i].email}</td>
					<td>${userList[i].address}</td>
					<td><button onclick="deleteItem(${i})">Delete</button></td>
				</tr>`
			}
		}

		function deleteItem(index) {
			userList.splice(index, 1)

			showDataTable()
		}

		function resetData() {
			fullnameTag.value = ""
			emailTag.value = ""
			addressTag.value = ""
		}
	</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 đó