I`ve dynamiclally added rows, and i want to auto calculate values on it.
Here are part of my code:
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Код на продукт</th>
<th>Описание</th>
<th>Брой</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1" /> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>
</tr>
</tbody>
</table>
<span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span>
<div style="float: right; width: 100px;">
<div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>
And jquery
$('input').keyup(function(){ // run anytime the value changes
var firstValue = parseFloat($('#itemQty').val()); // get value of field
var secondValue = parseFloat($('#itemPrice').val()); //
$('#added').html(firstValue * secondValue); // add them and output it
});
The problem is that that script calculate only the first row.
You have repeated IDs in your webpage. And whenever you will use repeated IDs it will always treated for the first Element. So, you have to make dynamic ids for this purpose:
Making HTML with PHP:
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Код на продукт</th>
<th>Описание</th>
<th>Брой</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<?php
foreach( $yourArray as $key=>$item){}
?>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode_<?php echo $key;?>" tabindex="1" /> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_<?php echo $key;?>" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty_<?php echo $key;?>" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_<?php echo $key;?>" readonly="readonly" /> </td>
</tr>
<?php
}
?>
</tbody>
</table>
<span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span>
<div style="float: right; width: 100px;">
<div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>
Javascirpt/JQuery:
$(document).ready(function(){
$('input').keyup(function(){ // run anytime the value changes
// getting parent TR of current Input
var parent_tr = $(this).closest('tr');
//gettting parent TR's child input named as 'itemQty[]'
var firstValue = parseFloat($("input[name='itemQty[]']", parent_tr).val()); // get value of field
//gettting parent TR's child input named as 'itemPrice[]'
var secondValue = parseFloat($("input[name='itemPrice[]']", parent_tr).val()); //
$('#added').html(firstValue * secondValue); // add them and output it
});
});
Demo will Static HTML 2 rows: http://jsfiddle.net/Lvjff4ga/
$('input','#itemsTable').change(function(){
var tot = 0;
$('tbody tr','#itemsTable').each(function(){
tot += $('[name=itemQty\[\]]', this).val() * $('[name=itemPrice\[\]]', this).val();
});//each
$('#added').html(tot);
});
Related
<table class="table table-bordered table-striped table-xxs" id="tb3" name="tb3">
<thead>
<tr>
<th></th>
<th>Product Code</th>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr >
<td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
<td>
<input style="width:80px" type="text" id="Product_Code" class="form-control input-xs Product_Code " onkeyup="fetch()" value="<?php echo $r->Product_Code; ?>" name="Product_Code[]" required></td>
<td ><input style="width:300px" type="text" id="Product_Name" class="form-control input-xs" value="<?php echo $r->Prdtname; ?>" name = "Prdtname[]" value=""> </td>
<td><input style="width:80px" type="text" id="Qty" class="form-control input-xs" value="<?php echo $r->Qty; ?>" name="Qty[]" required></td>
<td><input style="width:100px" type="text" id="Rate" class="form-control input-xs" value="<?php echo $r->rate; ?>" name="rate[]" required></td>
<td><input style="width:150px" type="text" id="Value" class="form-control input-xs" value="<?php echo $r->amount; ?>" name="amount[]" ></td>
<th><span class="glyphicon glyphicon-plus"></span></th>
</tr>
</tbody>
</table>
this table code....
<script>
$(document).ready(function (){
$('#addMore3').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove3', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
this is javascript code for creating table by clicking "+" event.
My prblm is how to fetch data from database display in this automatic table..
You should be able to do this using ajax call.
As you are using codeigniter -
View : Write your ajax and table generation code.
Controller: get the ajax request and pass it to modal.
Modal: get the data from database.
you should return array of object to view and then just parse the data and generate table.
If you dont want to write the table code and ajax then you can use datatable plugin.
I have three text box that given as an array, I want to add two text box and get a result in the third text box as shown in below.
<tbody>
<?php
$i=1;
foreach ($sub as $row)
{
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark" onclick="add_number()"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
i have used the below script and its running but getting a result in the first loop
<script type="text/javascript">
function add_number() {
var first_number = parseInt(document.getElementById("mark1").value);
var second_number = parseInt(document.getElementById("mark2").value);
var result = first_number + second_number;
document.getElementById("totmark").value = result;
}
</script>
please help us get an answer
html
<tbody>
<?php
$i=1;
$k=1;
foreach ($sub as $row)
{ $k++;
?>
<tr>
<td><?php echo $i++;?>
</td>
<td> <div><span style="border: none;"><input type="text" name="subject[]" class="textbox" value="<?php echo $row->subject_name;?>"></span></div></td>
<td><input type="text" name="mark-1[]" value="" id="mark1-<?php echo $k;?>"></td>
<td><input type="text" name="mark-2[]" value="" id="mark2-<?php echo $k;?>"></td>
<td><input type="text" name="total-mark[]" value="" id="totmark-<?php echo $k;?>" onclick="add_number(<?php echo $k;?>)"></td>
</tr>
<?php } ?>
<tr>
<th colspan="4">Total Mark</th>
<td></td></tr>
</tbody>
Script
<script type="text/javascript">
function add_number(k) {
var first_number = parseInt(document.getElementById("mark1-"+k).value);
var second_number = parseInt(document.getElementById("mark2-"+k).value);
var result = first_number + second_number;
document.getElementById("totmark-"+k).value = result;
}
</script>
The problem is the repeated IDs for each iteration, mark1, mar2, mark1, mark2, and so on. The function getElementById is returning the first element.
An alternative is to use the function closest('tr') and then find by name [name="mark-1[]"] and [name="mark-2[]"]. Then find the field to store the result using this .querySelector('[name="total-mark[]"]').
Finally, using the function addEventListener you can bind the event click to the whole set of elements [name="total-mark[]"].
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) {
elem.addEventListener('click', add_number);
});
function add_number() {
var tr = this.closest('tr');
var first_number = tr.querySelector('[name="mark-1[]"]').value;
var second_number = tr.querySelector('[name="mark-2[]"]').value;
var result = Number(first_number) + Number(second_number);
this.value = result;
}
<table>
<tbody>
<tr>
<td><input type="text" name="mark-1[]" value="" ></td>
<td><input type="text" name="mark-2[]" value="" ></td>
<td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
<tr>
<td><input type="text" name="mark-1[]" value="" ></td>
<td><input type="text" name="mark-2[]" value="" ></td>
<td><input type="text" name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
</tbody>
</table>
A recommendation is using the current index from the PHP variable $i and add specific IDs to every field, that way you will be able to get the elements directly. For example, the two fields would have these IDs: mark-1-1[], mark-1-2[] and mark-2-1[], mark-2-2[], and so on.
This approach uses the attribute dataset.
document.querySelectorAll('[name="total-mark[]"]').forEach(function(elem) {
elem.addEventListener('click', add_number);
});
function add_number() {
var field = this.dataset.field;
var first_number = document.getElementById('mark-1-' + field + '[]').value;
var second_number = document.getElementById('mark-2-' + field + '[]').value;
var result = Number(first_number) + Number(second_number);
this.value = result;
}
<table>
<tbody>
<tr>
<td><input type="text" id="mark-1-1[]" value="" ></td>
<td><input type="text" id="mark-2-1[]" value="" ></td>
<td><input type="text" data-field='1' name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
<tr>
<td><input type="text" id="mark-1-2[]" value="" ></td>
<td><input type="text" id="mark-2-2[]" value="" ></td>
<td><input type="text" data-field='2' name="total-mark[]" value="" placeholder='click to totalize'></td>
</tr>
</tbody>
</table>
i try to add a new row inside table, but all the fields inside this new row must have a new value everytime
This script allow to add a new row but it does'nt change automaticly the value of the row
<table width="100%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td><table class="table table-sm table-hover" id="mtable">
<thead>
<tr>
<th>id</th>
<th class="col-md-2">Fournisseur</th>
<th class="col-md-2">Groupe Clients</th>
<th class="col-md-2">Range Quantité</th>
<th class="col-md-2">Prix Fournisseur</th>
<th class="col-md-2">% Remise Client</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>84 <input type="hidden" name="id" value="84" /></td>
<td class="col-md-2"><select name="suppliers_id[84]" id="suppliers_id[84]" class="form-control"><option value="">--Aucun--</option><option value="1" selected="selected">test</option></select></td>
<td class="col-md-2"><select name="customers_group_id[84]" id="customers_group_id[84]" class="form-control"><option value="" selected="selected">Normal</option><option value="1">Tarifs 1</option></select></td>
<td class="col-md-2"><input type="text" name="discount_quantity[84]" value="5" placeholder="Qty" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_supplier_price[84]" value="5" placeholder="Supplier Price" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_customer[84]" value="5" placeholder="Discount without %" class="form-control" /></td>
<td></td>
</tr>
.........
<tr>
<td>102 <input type="hidden" name="id" value="102" /></td>
<td class="col-md-2"><select name="suppliers_id[102]" id="suppliers_id[102]" class="form-control"><option value="">--Aucun--</option><option value="1" selected="selected">test</option></select></td>
<td class="col-md-2"><select name="customers_group_id[102]" id="customers_group_id[102]" class="form-control"><option value="" selected="selected">Normal</option><option value="1">Tarifs 1</option></select></td>
<td class="col-md-2"><input type="text" name="discount_quantity[102]" value="5" placeholder="Qty" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_supplier_price[102]" value="5" placeholder="Supplier Price" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_customer[102]" value="5" placeholder="Discount without %" class="form-control" /></td>
<td></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
Below, for example, I add a new value, but this value is only for the first column.
The $new_id (new id value) must be applied for all column and everytime I add a column, the id has a news value.
I am not good in javascript. A little help.
Tk
<?php
$new_id = $id + 1;
?>
<input id="row" value="<?php echo $new_id; ?>" placeholder="Enter Item Name"/><button type="button" id="irow">Insert Row</><br/><br/>
<script>
$('#irow').click(function(){
if($('#row').val()){
$('#mtable tbody').append($("#mtable tbody tr:last").clone());
$('#mtable tbody tr:last :checkbox').attr('checked',false);
$('#mtable tbody tr:last td:first').html($('#row').val());
}else{alert('Enter Text');}
});
</script>
I want to develop a multilevel add more button using jquery.
I did that functionality, but its not success. It has many bugs. Some Logical issues are there...
My actual requirement there is one "Add more" button. When we click this add more button one Div will open. In side that div there is one text box and another one "add more" button
For example, First i add the main option value is "Bajaj". Under this option i want to add some options like "Discover", "Platina",...
Then i click next add more button and add the next option value is "Yamaha" under this Option i need to add sub options like FZ,YBR, Ray...
<div id="tabularoptions">
<input id="btnAdd" type="button" value="Add Options" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
<?php
if ($form['tabularOptions'] != '') {
foreach ($form['tabularOptions'] as $opt) {
?>
<div style="border:1px solid #ccc;margin: 10px;">
<table>
<tr>
<td>Option Value :</td>
<td>
<input name = 'tabluarOptionValue_<?php echo $opt['id']; ?>' type="text" value = "<?php echo $opt['tabularOptionValue']; ?>" />
<input type="hidden" name="tabluarOptionId_<?php echo $opt['id']; ?>" value="<?php echo $opt['id']; ?>">
</td>
<td><input type="button" value="Remove" class="remove" /></td>
<?php
if ($form['tabularSubOptions'] != '') {
foreach ($form['tabularSubOptions'] as $optsub) {
if ($optsub['tabularOptionId'] == $opt['id']) {
?>
<tr>
<td>
<input type="text" name="tabularSuboptionValue_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['tabularSuboptionValue']; ?>">
<input type="hidden" name="tabularSuboptionId_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['id']; ?>">
<input type="button" class="subOptionRemove" value="X">
</td>
</tr>
<?php
}
}
}
?>
</tr>
<tr>
</tr>
<tr>
<table>
<tr class="subOptionDiv">
<td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td>
</tr>
</table>
</tr>
</table>
</div>
<?php
}
}
?>
</div>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
$("body").on("click",".btnAdd1", function () {
$(this).closest("table").append('<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>');
});
$("body").on("click",".subOptionRemove", function () {
$(this).parent().remove();
});
});
var j = 1;
function GetDynamicTextBox(value) {
j=j+1;
$('#optionCount').val(j);
// alert(j);
return '<div id='+j+' style="border:1px solid #ccc;margin: 10px;"><table>\n\
<tr>\n\
<td>Option Value :</td>\n\
<td><input name = "tabluarOptionValue_'+j+'[]" type="text" value = "' + value + '" /></td>\n\
<td><input type="button" value="Remove" class="remove" /></td>\n\
</tr>\n\
<tr>\n\
</tr>\n\
<tr>\n\
<table>\n\
<tr class="subOptionDiv"><td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td></tr>\n\
<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>\n\
</table>\n\
</tr>\n\
</table></div>';
}
</script>
Please try this code may be usefull for you.
Put this jquery/javascript code where you js code is.
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
Put this code in your php/html file where you want the text box.
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<table width="100%" cellpadding="0" cellspacing="0" id="type">
<tr >
<td align="left">Subcategory</td>
</tr>
<tr>
<td>Type : <input type="text" name="type" id="type" /></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" id="subtype1">
<tr>
<td>
Subtype : <input type="text" name="type" id="type" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<input type="button" name="addsub" value="Add Subtype" onclick="addmore('1')" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div>
<input type="button" name="add" value="Add Type" onclick="addmoretype()" />
</div>
Javascript
num = 2;
function addmore(id)
{
var tablename = "#subtype"+id;
$(tablename+' tr:last').after('<tr><td> Subtype: <input type="text" name="type" id="type" /> </td> </tr>');
}
function addmoretype()
{
$('#type tr:last').after('<tr> <td>Type : <input type="text" name="type" id="type" /></td></tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0" > <tr> <td> <table width="100%" cellspacing="0" cellpadding="0" id="subtype'+ num+'"> <tr> <td> Subtype : <input type="text" name="type" id="type" /></td></tr> </table></td> </tr><tr> <td> <div> <input type="button" name="addsub" value="Add Subtype" onclick="addmore('+ num+')" /> </div> </td> </tr></table> </td></tr>');
num++;
}
see working example
I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)
Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo
What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle
I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});
I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO
Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});