We Keep Coding

Calculation for input array in every row Jquery

I am new into JQuery, My code is only working for the first row, it doesn't calculate for other rows. I have two button, one for adding another row and one for deleting it. What I try to do it to calculate price+vat*quantity and put it in total field in every row.
here if the code for my html
<table border='1' id="mytable" dir="rtl" style='border-collapse: collapse;'>
<thead>
<tr>
<th> partnumber </th>
<th>name</th>
<th>price </th>
<th>vat</th>
<th>quantity</th>
<th> price + vat</th>
<th> total quantity*(price+vat) </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class='tr_input'>
<td><input type='text' name="partnumber[]" class='username' id='partnumber_1' placeholder='پارت نه‌مبه‌ر '></td>
<td><input type='text' class='name' name="name[]" id='name_1' ></td>
<td><input type='text' class='price' name="price[]" id='price_1' ></td>
<td><input type='text' class='vat' name="vat[]" id='vat_1' ></td>
<td><input type='text' class='quantity' name="quantity[]" id='quantity_1' ></td>
<td><input type='text' class='amount' name="amount[]" id='amount_1' ></td>
<td><input type='text' class='total' name="total[]" id='total_1' ></td>
</tr>
</tbody>
</table>
<br>
<input type='button' value='Add fields' id='addmore' class="btn btn-success">
<input type='button' value='remove' id='remove' class="btn btn-danger">
Here is the screenshot for the interface.
And this is JS code for adding new row
$('#addmore').click(function(){
var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = lastname_id.split('_');
var index = Number(split_id[1]) + 1;
var html = "<tr class='tr_input'><td><input type='text' name='partnumber[]' class='username' id='username_"+index+"' placeholder='بگه‌ری بۆ پارت نه‌مبه‌ر '></td><td><input type='text' class='name' name='name[]' id='name_"+index+"'></td><td><input type='text' class='price' name='price[]' id='price_"+index+"' ></td><td><input type='text' class='vat' name='vat[]' id='vat"+index+"'></td><td><input type='text' class='quantity' name='quantity[]' id='quantity_"+index+"' ></td><td><input type='text' class='amount' name='amount[]' id='amount_"+index+"' ></td><td><input type='text' class='total' name='total[]' id='total_"+index+"' ></td><td align='center'><input type='checkbox' name='record'></td></tr>";
// Append data
$('tbody').append(html);
});
and finally this is code for calculation the total, only working for the first row.
$('.total').each(function() {
$(this).on('click',function (ev) {
// var total=0;
var quantity=$(this).attr('id');
var splitid = quantity.split('_');
var index = splitid[1];
var price= parseFloat($('#price_'+index).val());
var vat=parseFloat($('#vat_'+index).val());
var quan=parseFloat($('#quantity_'+index).val());
var amount=$('#amount_'+index).val();
amount=price+vat;
$('#amount_'+index).val(amount);
alert(amount);
//alert(price);
var total=amount*quan;
//var qunatity_num=parseInt(quantity.val());
$('#total_'+index).val(total);
//alert(total);
// $('#total_'+index).val(total);
});
});
please, could you tell me what's is wrong with my code, it's been a week I am trying to solve this. Thank you.

Some issues:
There is an underscore missing in the HTML that you add for a new row: vat should be vat_
Don't use $('.total').each(function() {: it is not necessary to loop. The click handler will work on all matching elements, if you take the next point into account:
Use event delegation to make sure your click handler also gets called for future cells that have the total class:
$(document).on('click', '.total', function (ev) {
With that it works.
However it would be better not to use dynamic id attributes all and use CSS classes only. With jQuery methods you can easily find out which is the "current" row that was clicked on (.closest("tr")) and then to .find() the element you need in your formula.

get the edited values of an inputs filled by ng-repeat | Angular js

In my view, the user double click on a row and the details will pop up with input have been filled up by ng-repeat, the user could change the values, but my problem is that i can't get the new value of the input.
My view:
/* This dislay the inputs with the value, ng-dblclick will get the input values*/
<tr ng-repeat="sf in selectedFacture" ng-dblclick="editFacture();" >
<td><input class="cls" value="{{sf.fcls_crt}}" type="text"/></td>
<td><input class="piece" value="{{sf.fpiece}}" type="text"/></td>
<td><input class="cls_gate" value="{{sf.fcls_crt_gate}}" type="text"/></td>
<td><input class="piece_gate" value="{{sf.fpiece_gate}}" type="text"/></td>
<td><input class="note" value="{{sf.note}}" type="text"/></td>
</tr>
JS:
// This function gets the **edited** values by input' class
$scope.editFacture=function(){
var editedQuanCls=$(".cls").val();
var editedQuan_piece=$(".piece").val();
var editedQuan_cls_crt_gate=$(".cls_gate").val();
var editedQuan_piece_gate=$(".piece_gate").val();
var editedNote=$(".oNote").val();
var editedNote_gate=$(".note").val();
alert(editedQuanCls + " - " + editedQuan_piece + " - " + editedQuan_cls_crt_gate + " - " + editedQuan_piece_gate + " - "+ editedNote + " " + editedNote_gate);
}
My problem is that the function is only returning the values of the first tr in the ng-repeat, what should i add to get all values? many thanks in advance

Have refactored your code.
var app= angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.selectedFacture = [{}];
$scope.editFacture=function(sf){
sf = sf || {};
var editedQuanCls= sf.fcls_crt,
editedQuan_piece= sf.fpiece,
editedQuan_cls_crt_gate= sf.fcls_crt_gate,
editedQuan_piece_gate= sf.fpiece_gate,
editedNote= sf.note;
alert(editedQuanCls + " - " + editedQuan_piece + " - " + editedQuan_cls_crt_gate + " - " + editedQuan_piece_gate + " - "+ editedNote);
}
});
<html ng-app="myApp">
<head></head>
<body>
<html ng-app="myApp">
<head></head>
<body>
<div ng-controller="myController">
<table>
<tr ng-repeat="sf in selectedFacture">
<td><input class="fcls_crt" ng-model="sf.fcls_crt" type="text"/></td>
<td><input class="fpiece" ng-model="sf.fpiece" type="text"/></td>
<td><input class="fcls_crt_gate" ng-model="sf.fcls_crt_gate" type="text"/></td>
<td><input class="fpiece_gate" ng-model="sf.fpiece_gate" type="text"/></td>
<td><input class="note" ng-model="sf.note" type="text"/></td>
<td><input type="button" name="edit" value="Edit" ng-click="editFacture(sf);"/></td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Pass sf into your function like:
<tr ng-repeat="sf in selectedFacture" ng-dblclick="editFacture(sf);" >
<td><input class="fcls_crt" ng-model="sf.fcls_crt" type="text"/ </td>
Add it as a param to your function, then reference the properties via the parameter in your function.
$scope.editFacture=function(){
var editedQuanCls=sf.fcls_crt;
...
}
Also, see this question: "Thinking in AngularJS" if I have a jQuery background?

Dynamic table in template written in html/javascript

I try do build a dynamic table, this table should replace a fix table.
<table cellpadding="3" cellspacing="0" border="1">
<tr>
<th>Aufgabe</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>Summe</th>
<th>Note</th>
</tr>
<tr>
<td> </td>
<td><input type="text" id="punkte0" name="punkte0" value="{$punkte.0}" size="3" onKeyUp="aktualisieren('punkte0','punkte1')" /></td>
<td><input type="text" id="punkte1" name="punkte1" value="{$punkte.1}" size="3" onKeyUp="aktualisieren('punkte1','punkte2')" /></td>
<td><input type="text" id="punkte2" name="punkte2" value="{$punkte.2}" size="3" onKeyUp="aktualisieren('punkte2','punkte3')" /></td>
<td><input type="text" id="punkte3" name="punkte3" value="{$punkte.3}" size="3" onKeyUp="aktualisieren('punkte3','punkte4')" /></td>
<td><input type="text" id="punkte4" name="punkte4" value="{$punkte.4}" size="3" onKeyUp="aktualisieren('punkte4','punkte5')" /></td>
<td><input type="text" id="punkte5" name="punkte5" value="{$punkte.5}" size="3" onKeyUp="aktualisieren('punkte5','punkte6')" /></td>
<td id="tds1">0</td>
<td></td>
</tr>
<tr>
<td>Gesamt</td>
<td colspan="6"></td>
<td id="summe">0</td>
<td id="note">{$student.note/10}</td>
</tr>
</table>
But the columns should be user-dependent, so I wrote a function in my PHP code, which save the value (number between 4 an 7) in my database. It is called in the database klausuraufgaben.
I tried this to replace the columns:
$iQuantity = (integer)$_POST['klausuraufgaben'];
$aTableHeads = [];
$aTableContents = [];
for ( $x=0; $x<$iQuantity; $x++ ) {
$aTableHeads[] = '<th>' . ($x + 1) . '</th>';
$aTableContents[] = '<td><input type="text" id="punkte' . (string)$x . '" name="punkte' . (string)$x . '" value="{$punkte.' . (string)$x . '}" size="3" onKeyUp="aktualisieren('punkte. (string)$x . '",'punkte. (string)$x+1 . '"></td>';
But it doesn't work. Can someone see what is wrong?
This is the Error, which I get:
[in kartei.tpl line 254]: syntax error: unrecognized tag: $aTableHeads[] = '' . ($x + 1) . ''; $aTableContents[] = '

thanks, i edit the code for the template in this way:
{php}
$iQuantity = (integer)$_POST['klausur_aufgaben'];
$aTableHeads = [];
$aTableContents = [];
{for $x=0 to $iQuantity;}
// {for( $x=0; $x<$iQuantity; $x++ )
$aTableHeads[] = '<th>' . ($x + 1) . '</th>';
$aTableContents[] = '<td><input type="text" id="punkte' . (string)$x . '" name="punkte' . (string)$x . '" value="{$punkte.' . (string)$x . '}" size="3" onKeyUp="aktualisieren('punkte. (string)$x . '",'punkte. (string)$x+1 . '"></td>';
{/for}
{/php}

I'm not smarty expert, but lets have a crack at this.
{php}
$iQuantity = (integer)$_POST['klausur_aufgaben'];
{/php}
<tr>
{for $x=0 to $iQuantity}
<th>{$x + 1}</th>
{/for}
</tr>
{for $x=0 to $iQuantity}
<td><input type="text" id="punkte{$x}" name="punkte{$x}" value="NotSureHere this needs to come from another array?" size="3" onKeyUp="aktualisieren('punkte{$x}','punkte{$x+1}')"/></td>
{/for}

Modify the html by using jquery css [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have the html code like this:
<table class="tbl">
<tr>
<td colspan="2">1<input class="text social" type="text" /></td>
<td colspan="2">2 <input class="text social" type="text"/></td>
</tr>
</table>
What I need I want it to be like this:
<table class="tbl">
<tr>
<td colspan="2">1</td>
<td><input class="text social" type="text" /></td>
</tr>
<tr>
<td colspan="2">2</td>
<td><input class="text social" type="text"/></td>
</tr>
</table>
I'm stuck with this, anyone help me please,Thanks.

Try this,
var $table = $('table').clone();
$table.html('');
$('td').each(function () {
var $tr = $('<tr/>').html($('<td/>').html($(this).text()));
$tr.append($('<td/>').html($(this).find('input').clone()));
$table.append($tr);
});
$('table').remove();
$table.appendTo('body');
Demo

"Modify the html by using jquery css"
I don't know what you mean by "using jquery css", but here's one way to do it using jQuery methods:
$(document).ready(function () {
var $table = $(".tbl"),
$newTR = $("<tr></tr>").appendTo($table);
$newTR.append($table.find("td").last());
$table.find("tr").each(function() {
$("<td></td>").append($(this).find("input")).appendTo(this);
});
});
Demo: http://jsfiddle.net/NWZGV/

$('.text social').insertBefore('</td><td>');
$('td[colspan='2']').first().insertAfter('</td><td>');

Live Demo
you can change html using jquery
HTML:
<table class="tbl" border="1">
<tr>
<td colspan="2">1<input class="text social" type="text" /></td>
<td colspan="2">2<input class="text social" type="text" /></td>
</tr>
</table>
<br />
<input type="button" value="change" id="btn" />
JQuery:
$(function () {
$('#btn').on('click', function () {
var s = "<tr>"
+ "<td colspan='2'>1</td>"
+ "<td><input class='text social' type='text' /></td>"
+ "</tr>"
+ "<tr>"
+ "<td colspan='2'>2</td>"
+ "<td><input class='text social' type='text' /></td>"
+ "</tr>";
$('table').html('');
$('table').append(s);
});
});

Dynamically Added Rows and Calculation Function Error After First Row

I'm working a project, it is almost done but I got a problem to finish it. I tried a lot of things and searched on the web, but unfortunately I could not succeed it.
The problem is about dynamically added rows at the table. Auto-calculating script is just working on the first row of the table, at 2nd, 3rd, ... rows of the table it does not work.
jsFiddle for below the code:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#AddLine").click(function () {
//var row = "<tr><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button>X</button></td></tr>";
var row = "<tr><td><input type=\"text\" style=\"width:100%;\" name=\"stokkodu[]\"></td><td><input type=\"text\" style=\"width:100%;\" name=\"stokadi[]\"></td><td><input type=\"text\" style=\"width:100%;\" id=\"miktar\" class=\"miktar\" name=\"miktar[]\"></td><td><input type=\"text\" style=\"width:100%;\" name=\"birim[]\"></td><td><input type=\"text\" style=\"width:100%;\" id=\"birimfiyat\" class=\"birimfiyat\" name=\"birimfiyat[]\"></td><td><input type=\"text\" style=\"width:100%;\" readonly id=\"tutar\" class=\"tutar\" name=\"tutar[]\"></td><td><input type=\"text\" style=\"width:100%;\" class=\"indirim\" name=\"indirim[]\"></td><td><input type=\"text\" style=\"width:100%;\" readonly class=\"indirimtutar\" name=\"indirimtutari[]\"></td><td><input type=\"text\" style=\"width:100%;\" class=\"kdv\" name=\"kdv[]\"></td><td><input type=\"text\" style=\"width:100%;\" readonly class=\"satirtoplami\" name=\"satirtoplami[]\"></td><td><button>X</button></td></tr>";
$("#table").append(row);
});
$("#table").on("click", "button", function() {
$(this).closest("tr").remove();
});
});
$(document).ready(function() {
$('input[id=miktar],input[id=birimfiyat],input[id=indirim],input[id=kdv], input[id=satirtoplami]').change(function(e) {
var total_mnozi = 0;
//var $row = $(this).parent();
var $row = $(this).closest("tr"); //this is the closest common root of the input elements
var miktar = parseFloat( $row.find('input[id=miktar]').val() );
var birimfiyat = parseFloat( $row.find('input[id=birimfiyat]').val() );
var indirim = parseFloat( $row.find('input[id=indirim]').val() );
var kdv = parseFloat( $row.find('input[id=kdv]').val() );
//total_mnozi = ((dep + minpre + adjpre) * procombase * profcomper) || 0; //calculate traditionally; display zero until result is meaningful
tutar = (miktar * birimfiyat) || 0; // tutar hesaplama. miktar x birim fiyat = tutar
indirimtutar= (tutar * indirim / 100) || 0; // indirim tutarı hesaplama input'a girilen %'ye göre hesaplar.
satirtoplami= ((tutar - indirimtutar) * ((kdv / 100) + 1 )) || 0;
$row.find('input[id=tutar]').val(tutar.toFixed(2)); // tutar'ın id="tutar"'a virgülden sonra 2 hane alacak şekilde yazdrılması.
$row.find('input[id=indirimtutar]').val(indirimtutar.toFixed(2));
$row.find('input[id=satirtoplami]').val(satirtoplami.toFixed(2));
});
});
//]]>
</script>
<input type="button" id="AddLine" value="add"/>
<table id="table">
<tr>
</tr>
<tr>
<td scope="col">Stok Kodu</th>
<td scope="col">Stok Adı</th>
<td scope="col">Miktar</th>
<td scope="col">Birim</th>
<td scope="col">Birim Fiyat</th>
<td scope="col">Tutar</th>
<td scope="col">İndirim (%)</th>
<td scope="col">İndirim Tutarı</th>
<td scope="col">KDV (%)</th>
<td scope="col">Satır Toplamı</th>
<td scope="col"></th>
</tr>
<tr>
<td><input type="text" style="width:100%;" name="stokkodu[]"></td>
<td><input type="text" style="width:100%;" name="stokadi[]"></td>
<td><input type="text" style="width:100%;" id="miktar" class="miktar" name="miktar[]"></td>
<td><input type="text" style="width:100%;" name="birim[]"></td>
<td><input type="text" style="width:100%;" id="birimfiyat" class="birimfiyat" name="birimfiyat[]"></td>
<td><input type="text" style="width:100%;" readonly id="tutar" class="tutar" name="tutar[]"></td>
<td><input type="text" style="width:100%;" id="indirim" class="indirim" name="indirim[]"></td>
<td><input type="text" style="width:100%;" readonly id="indirimtutar" class="indirimtutar" name="indirimtutari[]"></td>
<td><input type="text" style="width:100%;" id="kdv" class="kdv" name="kdv[]"></td>
<td><input type="text" style="width:100%;" readonly id="satirtoplami" class="satirtoplami" name="satirtoplami[]"></td>
<td><button>X</button></td>
</tr>
</table>​
How can I do this?

Your problem is with duplicate Ids.
You should not add two or more elements with the same Id. So, to solve the problem, your dynamically added elements should not have id attributes, then you use the class attribute to target the elements in each row.
Working sample: http://jsfiddle.net/3W48W/2/ (incorporating #Barmar 's answer)
HTM

There are two problems with your code:
First, you're using the same IDs in each row that you add dynamically. IDs are required to be unique.
Second, the .change() binding only applies to elements that are in the DOM at the time the page is loaded. To handle elements added dynamically, you need to use .on() to bind to a permanent element and delegate to the dynamic elements, or bind the event handler to the new row's elements after you append it to the DOM.