By GokiSoft.com| 20:03 23/03/2021|
Học Bootstrap

[Share Code] Tìm hiểu về Bootstrap + jQuery - Viết chương trình quản lý sản phẩm

#vidu1.html


<!DOCTYPE html>
<html>
<head>
	<!-- https://icons.getbootstrap.com/ -->
	<!-- https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp -->
	<title>Bootstrap 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>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

	<style type="text/css">
		.card {
			margin-top: 10px;
		}
		.card .card-body {
			padding: 10px;
		}
	</style>
</head>
<body>
  <div class="container">
  	<form method="post" id="MyForm">
  		<div class="form-group">
	  		<label for="title">Title:</label>
	  		<input required="true" type="text" name="title" class="form-control" id="title">
	  	</div>
	  	<div class="form-group">
	  		<label for="description">Description:</label>
	  		<input required="true" type="text" name="description" class="form-control" id="description">
	  	</div>
	  	<div class="form-group">
	  		<label for="thumbnail">Thumbnail:</label>
	  		<input required="true" type="text" name="thumbnail" class="form-control" id="thumbnail">
	  	</div>
	  	<div class="form-group">
	  		<label for="price">Price:</label>
	  		<input field-name="price" required="true" type="number" step="0.01" name="price" class="form-control" id="price">
	  	</div>
	  	<button type="submit" class="btn btn-success" id="add_product">Add Product</button>
	  	<button type="reset" class="btn btn-warning">Reset</button>
	  	<button type="button" class="btn btn-info" id="change_color_btn">Change Color</button>
  	</form>

  	<table class="table table-bordered table-striped">
  		<thead>
  			<tr>
  				<th>No</th>
  				<th>Thumbnail</th>
  				<th>Title</th>
  				<th>Description</th>
  				<th>Price</th>
  			</tr>
  		</thead>
  		<tbody id="result">
  		</tbody>
  	</table>
  </div>

  <script type="text/javascript" src="vidu1.js"></script>
</body>
</html>


#vidu1.js


// angularjs 1.8 -> vuejs <-> angular 8, 9, 10
$(function() {
	//doi cho load xong website -> bat dau xu ly khoi code tai day
	$('#MyForm').submit(function() {
		//Goi khi nao? khi du lieu -> submit (day du lieu di)
		return addProduct()
	})

	$('#change_color_btn').click(function() {
		a = Math.random() * 255
		b = Math.random() * 255
		c = Math.random() * 255

		$('input').css('background-color', `rgb(${a}, ${b}, ${c})`)

		$('[field-name=price]').css('color', 'red')
	})
})

var count = 0
function addProduct() {
	console.log('add product')
	//Thao tac du lieu
	//Thao tac voi tag -> input
	title = $('#title').val()
	description = $('#description').val()
	thumbnail = $('#thumbnail').val()
	price = $('#price').val()

	console.log(title)

	//Them noi dung text/html vao tag khong phai input
	$('#result').append(`
  			<tr>
  				<td>${++count}</td>
  				<td><img src="${thumbnail}" style="width: 100px"></td>
  				<td>${title}</td>
  				<td>${description}</td>
  				<td>${price}</td>
  			</tr>`)
	// $('#result').prepend(count++)
	// $('#result').before(count++)
	// $('#result').after(count++)

	return false
}


Tags:

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

5

(Dựa trên đánh giá ngày hôm nay)