user3659911
Reputation: 197
How can I detect values change in column for dynamic rows in table?
I am trying to find a solution to dynamically change the line total column when quantity and unit price of the rows are change. How can I detect the change for each rows-this includes after cloning rows. Currently this is my html codes. I hope to dynamically change the values using jquery. I have been trying to research for a long time but I still couldn't figure it out.
Here an image to explain what I am referring:http://postimg.org/image/j9cb4r5rh/
<table class="table table-bordered" id="mytable">
<thead>
<tr>
<th></th>
<th class="col-sm-3">Item</th>
<th class="col-sm-2">Item Name</th>
<th class="col-sm-3">Description</th>
<th class="col-sm-2">Unit Price</th>
<th class="col-sm-2">Qty</th>
<th class="col-sm-3">Line Total</th>
<th class="col-sm-2">Stock Level</th>
</tr>
</thead>
<tbody>
<tr id='tableRow1' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td><input class="form-control" disabled class="data_input" disabled/></td>
<td> <input type="text" class="form-control" class='inputPartNo' disabled></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control" ></td>
<td> <input class="form-control" ></td>
<td> <input class="form-control" ></td>
<td></td>
<!--<td> <span class="glyphicon glyphicon-ok" aria-hidden="true" style="margin:9px 0 0 12px;"></span></td>-->
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td><input class="form-control" disabled class="data_input" disabled/></td>
<td> <input type="text" class="form-control" class='inputPartNo'disabled ></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control" ></td>
<td> <input type="text" class="form-control" ></td>
<td> <input class="form-control" ></td>
<td></td>
<!-- <td> <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td><input class="form-control" disabled class="data_input" disabled/></td>
<td> <input type="text" class="form-control" class='inputPartNo' disabled></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control" ></td>
<td> <input type="text" class="form-control" ></td>
<td> <input class="form-control" ></td>
<td></td>
<!-- <td> <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td>
<input class="form-control" disabled class="data_input" disabled/>
</td>
<td> <input type="text" class="form-control" class='inputPartNo' disabled></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control" ></td>
<td> <input type="text" class="form-control" ></td>
<td> <input class="form-control" ></td>
<td></td>
<!-- <td> <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox' /></td>
<td>
<input class="form-control" disabled class="data_input" disabled/>
</td>
<td> <input class="form-control" class='inputPartNo'class="data_input" disabled ></td>
<td><textarea rows="4" cols="40" class="form-control" disabled class="data_input"/></textarea></td>
<td> <input class="form-control" class="data_input" ></td>
<td> <input class="form-control" ></td>
<td> <input class="form-control" ></td>
<td></td>
<!-- <td> <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
</tr>
</tbody>
</table>
Here is my jquery code as requested:
//Insert new rows after the last row in the table
$("#add").click(function()
{
var numRows = $('#getnumRows').val();
alert(numRows);
alert('triggered!');
var selectlastRow=$('#mytable tbody>tr').eq(rowIndex);
for (i=0; i < numRows; i++)
{
$(selectlastRow).clone(true,true).insertAfter(selectlastRow);
$(selectlastRow).addClass('rows');
selectlastRow.find('td').children('select,input,textarea,input').val('');
}
});//end click tag
I have tried adding this each function.However it did not work out.
$('.inputJobsheet>#mytable>tbody>.rows').each(function(index)){
alert(index);
});
Here's the codes that I have updated:
$('#mytable>tbody>tr>td').on('change', '.unitprice, .qty', function() {
var $elem = event.target; //to get the element which triggered this event
alert($elem);
var $lineTotalElem = $elem.parent.find('.linetotal'); //get linetotal input val
var qty = $elem.parent.find('.qty').val();
var unitprice = $elem.parent.find('.unitprice').val()
if(qty !== undefined && unitprice !== undefined) {
var total = qty * unitprice;
if(total !== undefined || total > 0) {
$lineTotalElem.val(total);
}
}
});
<table class="table table-bordered" id="mytable">
<thead>
<tr>
<th></th>
<th class="col-sm-3">Item</th>
<th class="col-sm-2">Item Name</th>
<th class="col-sm-3">Description</th>
<th class="col-sm-2">Unit Price</th>
<th class="col-sm-2">Qty</th>
<th class="col-sm-3">Line Total</th>
<th class="col-sm-2">Stock Level</th>
</tr>
</thead>
<tbody>
<tr id='tableRow1' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td><input class="form-control" disabled disabled/></td>
<td> <input type="text" class="form-control" disabled></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control unitprice" ></td>
<td> <input class="form-control qty" ></td>
<td> <input class="form-control linetotal" ></td>
<td></td>
<!--<td> <span class="glyphicon glyphicon-ok" aria-hidden="true" style="margin:9px 0 0 12px;"></span></td>-->
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td><input class="form-control" disabled disabled/></td>
<td> <input type="text" class="form-control" disabled ></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control unitprice" ></td>
<td> <input type="text" class="form-control qty" ></td>
<td> <input class="form-control linetotal" ></td>
<td></td>
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td><input class="form-control" disabled/></td>
<td> <input type="text" class="form-control" disabled></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control unitprice" ></td>
<td> <input type="text" class="form-control qty" ></td>
<td> <input class="form-control linetotal" ></td>
<td></td>
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox'/></td>
<td>
<input class="form-control" disabled disabled/>
</td>
<td> <input type="text" class="form-control" disabled></td>
<td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
<td> <input type="text" class="form-control unitprice" ></td>
<td> <input type="text" class="form-control qty" ></td>
<td> <input class="form-control linetotal" ></td>
<td></td>
</tr>
<tr id='tableRow2' class='rows'>
<td><input type="checkbox" class='chkbox' /></td>
<td>
<input class="form-control" disabled disabled/>
</td>
<td> <input class="form-control" disabled ></td>
<td><textarea rows="4" cols="40" class="form-control" disabled/></textarea></td>
<td> <input class="form-control unitprice" ></td>
<td> <input class="form-control qty" ></td>
<td> <input class="form-control linetotal" ></td>
<td></td>
</tr>
</tbody>
</table>
Upvotes: 0
Views: 2051
Answers (1)
VPK
Reputation: 3090
Try attaching the onchange event to the row elements like this,
$('#mytable').on('change', '.unitprice, .qty', function() {
/* do your calculation here */
});
This will attach the onchange event to the current as well as future elements also. It is called Delegated events, and have the advantage that they can process events from descendant elements that are added to the document at a later time. Also an event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody) as in normal event handlers the event is bind to each row.
Edit
You have added many class attributes, which is not necessary to add multiple classes. You can add multiple classes in same attribute like class="class1 class2 class3".
Add class unitprice to the input elements which are in the same column as the title Unit Price. Same for class qty under title Qty and linetotal under Line Total. Now as you want to calculate the Line Total from Unit Price and Qty, you have to add onchange event to the both input elements with classes unitprice and qty. So the above onchange event handler can be used as,
$('#mytable').on('change', '.unitprice, .qty', function(event) {
var $elem = event.target; //to get the element which triggered this event
var $lineTotalElem = $elem.parent.find('.linetotal'); //get linetotal input val
var qty = $elem.parent.find('.qty').val();
var unitprice = $elem.parent.find('.unitprice').val()
if(qty !== undefined && unitprice !== undefined) {
var total = qty * unitprice;
if(total !== undefined || total > 0) {
$lineTotalElem.val(total);
}
}
});
Upvotes: 1
Related Questions
- how to detect whether there are any changes happening in the text in one of the <td> of each row of a table?
- Detect html table cell value change
- jQuery alert if table rows change (Fiddle inside)
- Listen any changes event on table HTML by jQuery
- How to Detect Dynamically generated ROWS in TABLE
- Catch changes in dynamicly updated tables
- How to detect a change in any <td> of table, using javascript?
- Detect row data change in html (form) table (JavaScript / Jquery)
- Detect the row and get the td value using javascript. (Dynamic table)
- How do i know what values have been changed in the table in jquery