# How do I calculate the total of the qty and price in a dynamic created html table row

3891 views
0

I need help I have no Idea how to get the price and qty subtotals also I'm getting an undefined in the type field which is a drop down input I found this code here in this forum it calculates the total of the price column put not multiplying the qty and price to give a subtotal I'm very new at this jquery and java script How can I add a function that would multiply the qty * price

``````<script type="text/javascript">
function row(Id, Code, Client, Quantity, Price) {
this.Id = Id;
this.Code = Code;
this.Client = Client;
//this.DebitCredit = DebitCredit;
this.Quantity = Quantity;
this.Price = Price;
}

function model() {
this.rows = [];
}

var mymodel = new model();

\$(document).ready(function() {

\$("body").on("click", ".delete", function() {
var id = \$(this).data('id');
for (i = 0; i < mymodel.rows.length; i++) {
console.log(mymodel.rows[i].Id);
if (mymodel.rows[i].Id == id) {
mymodel.rows.splice(i, 1);
}
}
draw();
});

\$('#add').click(function() {
mymodel.rows.push(new row(
\$('#Id').val(),
\$('#Code').val(),
\$('#Client').val(),
Number(\$('#Quantity').val()),
Number(\$('#Price').val())
))
draw();
});
})

function draw() {
\$('tbody').empty();
var totalQuantity = 0;
var totalPrice = 0;
\$.each(mymodel.rows, function(i, row) {
totalQuantity += row.Quantity;
totalPrice += row.Price;
var myrow = '<tr>'
\$.each(row, function(key, value) {
myrow += '<td>' + value + '</td>'
});
myrow += '<td><input type="button" class="btn btn-danger delete" data-id="' + row.Id + '" value="X"/></td>'
myrow += '<tr>'
\$('tbody').append(myrow);
});
\$('#totalQuantity').text(totalQuantity)
\$('#totalPrice').text(totalPrice)
}
</script>``````
``````<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<table class="table table-condensed">
<thead>
<tr>
<td>Part #</td>
<td>Part Name</td>
<td>Type</td>
<td>Quantity</td>
<td>Price</td>
<td>Delete</td>
</tr>
</thead>
<tbody>

</tbody>
<tfoot>
<tr>
<td colspan=7>Total Quantity:
<span id="totalQuantity"></span> Total Price:
<span id="totalPrice"></span>
</td>

</tr>
</tfoot>
</table>

<form class="form-inline">
<div class="form-group">
<label for="id">Part #:</label>
<input type="text" class="form-control" id="Id">
</div>
<div class="form-group">
<label for="PartName">Part Name:</label>
<input type="text" class="form-control" id="Code">
</div>
<div class="form-group">
<label for="type">Type:</label>
<select name="type" id="cliente" class="form-control">
<option value="" selected="selected"">Please Select..</option>
<option value="Code">Code</option>
<option value="Regular">Regular</option>
</select>
</div>
<div class="form-group">
<label for="Quantity">Quantity:</label>
<input type="number" class="form-control" id="Quantity">
</div>
<div class="form-group">
<label for="Price">Price:</label>
<input type="number" class="form-control" id="Price">
</div>
<input type="button" class="btn btn-info" value="add" id="add" />
</form>
</body>
</html>``````

answered question

### 1 Answer

11

You were missing a small detail. When setting the total price, you were using this code `totalPrice += row.Price;`. All you needed to do, was changing the code, so that instead of just adding up the price, you would multiply it by the row quantity, `totalPrice += row.Price * row.Quantity;`.

``````function row(Id, Code, Client, Quantity, Price) {
this.Id = Id;
this.Code = Code;
this.Client = Client;
//this.DebitCredit = DebitCredit;
this.Quantity = Quantity;
this.Price = Price;
}

function model() {
this.rows = [];
}

var mymodel = new model();

\$(document).ready(function() {

\$("body").on("click", ".delete", function() {
var id = \$(this).data('id');
for (i = 0; i < mymodel.rows.length; i++) {
console.log(mymodel.rows[i].Id);
if (mymodel.rows[i].Id == id) {
mymodel.rows.splice(i, 1);
}
}
draw();
});

\$('#add').click(function() {
mymodel.rows.push(new row(
\$('#Id').val(),
\$('#Code').val(),
\$('#Client').val(),
Number(\$('#Quantity').val()),
Number(\$('#Price').val())
))
draw();
});
})

function draw() {
\$('tbody').empty();
var totalQuantity = 0;
var totalPrice = 0;
\$.each(mymodel.rows, function(i, row) {
totalQuantity += row.Quantity;
totalPrice += row.Price * row.Quantity;
var myrow = '<tr>';
\$.each(row, function(key, value) {
myrow += '<td>' + value + '</td>'
});
myrow += '<td><input type="button" class="btn btn-danger delete" data-id="' + row.Id + '" value="X"/></td>'
myrow += '<tr>'
\$('tbody').append(myrow);
});
\$('#totalQuantity').text(totalQuantity)
\$('#totalPrice').text(totalPrice)
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<table class="table table-condensed">
<thead>
<tr>
<td>Part #</td>
<td>Part Name</td>
<td>Type</td>
<td>Quantity</td>
<td>Price</td>
<td>Delete</td>
</tr>
</thead>
<tbody>

</tbody>
<tfoot>
<tr>
<td colspan=7>Total Quantity:
<span id="totalQuantity"></span> Total Price:
<span id="totalPrice"></span>
</td>

</tr>
</tfoot>
</table>

<form class="form-inline">
<div class="form-group">
<label for="id">Part #:</label>
<input type="text" class="form-control" id="Id">
</div>
<div class="form-group">
<label for="PartName">Part Name:</label>
<input type="text" class="form-control" id="Code">
</div>
<div class="form-group">
<label for="type">Type:</label>
<select name="type" id="cliente" class="form-control">
<option value="" selected="selected"">Please Select..</option>
<option value="Code">Code</option>
<option value="Regular">Regular</option>
</select>
</div>
<div class="form-group">
<label for="Quantity">Quantity:</label>
<input type="number" class="form-control" id="Quantity">
</div>
<div class="form-group">
<label for="Price">Price:</label>
<input type="number" class="form-control" id="Price">
</div>
<input type="button" class="btn btn-info" value="add" id="add" />
</form>
</body>
</html>``````

Please, let me know if you need anything else.

posted this

## Have an answer?

JD

Please login first before posting an answer.