Need to add clear buttons to the product tables for the code below: <html> <head
ID: 3904340 • Letter: N
Question
Need to add clear buttons to the product tables for the code below:
<html>
<head>
<title>TEST 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var prodCount = 0;
var prodAdded = [];
var products = [];
function Product()
{
this.items = [];
}
Product.prototype.addItem = function(n, p, t, tp) {
this.items.push({
name: n,
price: parseFloat(p),
quant: parseInt(t),
totprice: parseFloat(tp)
});
}
$("#addProd").click(function() {
var template = "<h3>Product " + (prodCount + 1) + "</h3><div class=" + prodCount + ">";
template += $(".prodTemplate").html();
template += "</div>"
$(".contentSection").append(template);
prodAdded.push(prodCount);
prodCount++;
});
$(document).on("click", ".addItem", function() {
var parentTable = $(this).parent().parent().parent().parent();
var itemName = parentTable.find(".itemName").val();
var itemPrice = parentTable.find(".itemPrice").val();
var itemQuant = parentTable.find(".itemQuantity").val();
var itemTotPrice = parentTable.find(".itemTotPrice").val();
var divCount = parentTable.parent().attr("class");
if ($.inArray(parseInt(divCount), prodAdded) >= 0)
{
if (products[parseInt(divCount)] == null || products[parseInt(divCount)] == undefined)
{
var s = new Product();
s.addItem(itemName, itemPrice, itemQuant, itemTotPrice);
products.push(s);
alert("Product added successfully!");
} else
{
products[parseInt(divCount)].addItem(itemName, itemPrice, itemQuant, itemTotPrice);
alert("Product added successfully!");
}
}
});
$(document).on("click", ".getProductPrice", function() {
if (products.length > 0)
{
var total = 0;
var resultTemplate = "<label class='closeResult'>X</label><br/>";
$(products).each(function(i, v) {
$(v.items).each(function(z, k) {
resultTemplate += "Product Name: " + k.name + "<br/>" +
"Price: " + k.price + "<br/>" +
"Quantity: " + k.quant + "<br/>" +
"Total Price of Product: " + k.totprice + "<br/>";
total += k.totprice;
});
});
resultTemplate += "<br/>Total Amount of all Products: " + total + "<br/>";
$(".resultSection").show();
$(".resultSection").html(resultTemplate);
} else
{
alert("No Products Found!");
}
});
$(document).on("click", ".closeResult", function() {
$(".resultSection").hide();
});
$(document).on("keyup", ".itemQuantity", function() {
debugger;
var parentTable = $(this).parent().parent().parent().parent();
var tableRows = $(parentTable).find("tr");
var price = $(tableRows[1]).find("input").val();
$(tableRows[3]).find("input").val(parseInt(price) * parseInt($(this).val()));
});
});
</script>
<style type="text/css">
h1 {
text-align: center;
}
.prodTemplate {
display: none;
}
.resultSection {
display: none;
position: fixed;
height: 200px;
width: 400px;
max-height: 600px;
overflow: auto;
left: 30%;
top: 30%;
border: 1px solid black;
border-radius: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Products</h1>
<button id="addProd">Add Products</button>
<button class="getProductPrice">Get Total Price</button>
<div class="prodTemplate">
<table class="prodTable">
<tr>
<td>Product Name:</td>
<td><input class="itemName" type="text" /></td>
</tr>
<tr>
<td>Price:</td>
<td><input class="itemPrice" type="number" /></td>
</tr>
<tr>
<td>Quantity:</td>
<td><input class="itemQuantity" type="number" /></td>
</tr>
<tr>
<td>Total Price:</td>
<td><input class="itemTotPrice" type="text" readonly /></td>
</tr>
<tr>
<td>
<button class="addItem">Add Product</button>
</td>
</tr>
</table>
</div>
<div class="contentSection">
</div>
<div class="resultSection">
</div>
</body>
</html>
Explanation / Answer
If you have any doubts, please give me comment...
<html>
<head>
<title>TEST 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var prodCount = 0;
var prodAdded = [];
var products = [];
function Product() {
this.items = [];
}
Product.prototype.addItem = function (n, p, t, tp) {
this.items.push({
name: n,
price: parseFloat(p),
quant: parseInt(t),
totprice: parseFloat(tp)
});
}
$("#addProd").click(function () {
var template = "<h3>Product " + (prodCount + 1) + "</h3><div class=" + prodCount + ">";
template += $(".prodTemplate").html();
template += "</div>"
$(".contentSection").append(template);
prodAdded.push(prodCount);
prodCount++;
});
$(document).on("click", ".addItem", function () {
var parentTable = $(this).parent().parent().parent().parent();
var itemName = parentTable.find(".itemName").val();
var itemPrice = parentTable.find(".itemPrice").val();
var itemQuant = parentTable.find(".itemQuantity").val();
var itemTotPrice = parentTable.find(".itemTotPrice").val();
var divCount = parentTable.parent().attr("class");
if ($.inArray(parseInt(divCount), prodAdded) >= 0) {
if (products[parseInt(divCount)] == null || products[parseInt(divCount)] == undefined) {
var s = new Product();
s.addItem(itemName, itemPrice, itemQuant, itemTotPrice);
products.push(s);
alert("Product added successfully!");
} else {
products[parseInt(divCount)].addItem(itemName, itemPrice, itemQuant, itemTotPrice);
alert("Product added successfully!");
}
}
});
$(document).on("click", "#clrProd", function(){
prodCount = 0;
prodAdded = [];
products = [];
$(".closeResult").trigger("click");
alert("All products are cleared successfully");
});
$(document).on("click", ".getProductPrice", function () {
if (products.length > 0) {
var total = 0;
var resultTemplate = "<label class='closeResult'>X</label><br/>";
$(products).each(function (i, v) {
$(v.items).each(function (z, k) {
resultTemplate += "Product Name: " + k.name + "<br/>" +
"Price: " + k.price + "<br/>" +
"Quantity: " + k.quant + "<br/>" +
"Total Price of Product: " + k.totprice + "<br/>";
total += k.totprice;
});
});
resultTemplate += "<br/>Total Amount of all Products: " + total + "<br/>";
resultTemplate += "<div id='clrProd'>Clear All products</div>";
$(".resultSection").show();
$(".resultSection").html(resultTemplate);
} else {
alert("No Products Found!");
}
});
$(document).on("click", ".closeResult", function () {
$(".resultSection").hide();
});
$(document).on("keyup", ".itemQuantity", function () {
debugger;
var parentTable = $(this).parent().parent().parent().parent();
var tableRows = $(parentTable).find("tr");
var price = $(tableRows[1]).find("input").val();
$(tableRows[3]).find("input").val(parseInt(price) * parseInt($(this).val()));
});
});
</script>
<style type="text/css">
h1 {
text-align: center;
}
.prodTemplate {
display: none;
}
.resultSection {
display: none;
position: fixed;
height: 200px;
width: 400px;
max-height: 600px;
overflow: auto;
left: 30%;
top: 30%;
border: 1px solid black;
border-radius: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Products</h1>
<button id="addProd">Add Products</button>
<button class="getProductPrice">Get Total Price</button>
<div class="prodTemplate">
<table class="prodTable">
<tr>
<td>Product Name:</td>
<td>
<input class="itemName" type="text" />
</td>
</tr>
<tr>
<td>Price:</td>
<td>
<input class="itemPrice" type="number" />
</td>
</tr>
<tr>
<td>Quantity:</td>
<td>
<input class="itemQuantity" type="number" />
</td>
</tr>
<tr>
<td>Total Price:</td>
<td>
<input class="itemTotPrice" type="text" readonly />
</td>
</tr>
<tr>
<td>
<button class="addItem">Add Product</button>
</td>
</tr>
</table>
</div>
<div class="contentSection">
</div>
<div class="resultSection">
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.