Add Product / Delete Product JQuery.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css" >
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>
<input type="text" class="form-control" value="" id="ProductId" />
</th>
<th>
<input type="text" class="form-control" value="" id="ProductName" />
</th>
<th>
<input type="text" class="form-control" value="" id="ProductPrice" />
</th>
<th>
<input type="text" class="form-control" value="" id="ProductQuanity" />
</th>
<th>
<button class="AddProduct btn btn-outline-secondary" >Add Product</button>
</th>
</tr>
<tr>
<th>Item Id</th>
<th>Item Name</th>
<th>Item Price</th>
<th>Item Quantity</th>
<th>Buy</th>
</tr>
</thead>
<tbody id="ProductsTable">
<td>11</td>
<td>22</td>
<td>333</td>
<td>44</td>
<td><button class="btn btn-default deleted">Remove</button></td>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
// Add code
$(".AddProduct").click(function(){
var ProductId = $("#ProductId").val();
var ProductName = $("#ProductName").val();
var ProductPrice = $("#ProductPrice").val();
var ProductQuanity = $("#ProductQuanity").val();
var products= "";
products += "<tr>"
products += "<td>" + ProductId + "</td>";
products += "<td>" + ProductName + "</td>";
products += "<td>" + ProductPrice + "</td>";
products += "<td>" + ProductQuanity + "</td>";
products += "<td>" + "<button class='btn btn-default deleted'>Remove</button>" + "</td>";
products += "</tr>";
$("#ProductsTable").append(products);
$("#ProductId, #ProductName, #ProductPrice, #ProductQuanity").val("");
});
// delete
$(document).on('click','#ProductsTable .deleted', function(){
$(this).parent().parent().remove();
});
})
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>
No comments:
Post a Comment