I found a solution to select a single range of checkboxes in table created by JsGrid.
$(document).on('click', '[type = checkbox]' , function(e) {
if (e.shiftKey) {
var first = $("#jsGrid input[type='checkbox']:checked").first().parent().parent().index(),
last = $("#jsGrid input[type='checkbox']:checked").last().parent().parent().index();
for (var i = first; i < last; i++) {
$("#jsGrid").find("tbody tr index").eq(i).children().first().find("input[type='checkbox']").prop("checked", true);
$("#jsGrid .jsgrid-grid-body tbody tr").eq(i).find("input[type='checkbox']").prop("checked", true)
}
}
});
The problem with this solution is that is only allows for a single range of checkboxes.
To add multiple ranges, I can set the bottom of the range to the current row index with
last = $(this).parent().parent().index();
Now I would like to find the row index of the row with next row above that has a selected checkbox.
I would think it should be a variant of the code below.
first = $(this).prevUntil(':checkbox', 'checked').parent().parent().index(); // -1
I can't get this to work.
Or this
first = $(this).parent().parent().prevUntil(':checkbox', 'checked').index(); // -1
HTML
<tbody>
<tr class="jsgrid-row">
<td>1</td>
<td><input type="checkbox" rel="898"></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-alt-row">
<td>1</td>
<td><input type="checkbox" rel="898"></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-row">
<td>1</td>
<td><input type="checkbox" rel="898"></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-alt-row">
<td>1</td>
<td><input type="checkbox" rel="898"></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
</tbody>
Thanks!
[1] What I understand is: When checked the last checkbox get the nearest previous row which has checked checkbox
$('input[type="checkbox"]:last').on('change' , function(){
if(this.checked){
var ThisRowIndex = $(this).closest('tr').index();
$($('table tr:lt('+ (ThisRowIndex) +')').get().reverse()).filter(function(){
return $(this).find('input[type="checkbox"]:checked').length;
}).each(function(){
console.log('This Nearst Row Index: '+ $(this).index() + ' Has checked checkbox');
return false;
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="jsgrid-row">
<td>1</td>
<td><input type="checkbox" value="100" rel="898"/></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-alt-row">
<td>1</td>
<td><input type="checkbox" rel="898"/></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-row">
<td>1</td>
<td><input type="checkbox" rel="898"/></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-alt-row">
<td>1</td>
<td><input type="checkbox" rel="898"></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
</tbody>
</table>
Explanation:- with checkbox use change event.
if(this.checked){ // if this checkbox checked
var ThisRowIndex = $(this).closest('tr').index(); // get the closest ow index when this checkbox checked
$('table tr:lt('+ (ThisRowIndex) +')').filter(function(){ // use `lt()` to select the previous rows then filter them to check if there is a checked checkbox in each one or not
return $(this).find('input[type="checkbox"]:checked').length; //check if there is a checked checkbox in each one or not
}).each(function(){ // loop through the rows which has checked checkbox
console.log('This Row With Index: '+ $(this).index() + ' Has checked checkbox'); // print the index of each row
});
}
For reverse you can use $($('table tr:lt('+ (ThisRowIndex) +')').get().reverse()) .. see updated snippet
:last for the last element
return false; in .each() break the loop
Note With the above piece of code you can do a lot of things
.. Just understand the idea of it and it will be very helpful for
you
[2] And with prevUntil() to get the indexes of the rows between index checked checkbox and the shift-select checkbox
$('input[type="checkbox"]:last').on('change' , function(){
if(this.checked){
$(this).closest('tr').prevUntil('tr:has(input[type="checkbox"]:checked)').each(function(){
console.log($(this).index());
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="jsgrid-row">
<td>1</td>
<td><input type="checkbox" value="100" rel="898"/></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-alt-row">
<td>1</td>
<td><input type="checkbox" rel="898"/></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-row">
<td>1</td>
<td><input type="checkbox" rel="898"/></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
<tr class="jsgrid-alt-row">
<td>1</td>
<td><input type="checkbox" rel="898"></td>
<td>02/27/2019</td>
<td>19122-37</td>
<td>SMITH</td>
</tr>
</tbody>
</table>
Related
I am currently working on a FooTable project where I am trying to create a 'select all' checkbox. I have run in to two issues and I cannot figure out how to proceed;
I can select all items, either ALL items (irrespective of filtering)
or just the items on the page.
I can get all the rows to show up, and select, but It will not filter.
I can apply a filter, and still selects all rows.
What I am looking for is a way to only select the filtered rows checkboxes, even if the rows are on different pages. I figured a cheaky way to accomplish this would be:
increase pageSize to more than the amount of filtered rows
select all checkboxes in shown rows
revert back to OG pageSize
<table class="tg" data-paging="true" data-paging-size="3" data-filtering="true">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Select All:<input type="checkbox" class="check-all"></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
</tbody>
</table>
jQuery(function($) {
$('.tg').footable();
function changePageSize(qs_table, num_rows_page) {
let newSize = num_rows_page;
FooTable.get(qs_table).pageSize(newSize);
}
function checkedAll(qs_table, qs_checkbox, num_column, checked) {
var ft = FooTable.get(qs_table)
ft.pageSize(11);
FooTable.init(qs_table);
let rows = ft.rows.all;
rows.forEach(function(row) {
row.draw(); //REQUIRED for js rendering row, else selected only chockboxes on the active page
$(qs_checkbox, row.cells[num_column].$el[0]).prop('checked', checked);
});
}
$(document).on("change", ".check-all", function() {
checkedAll(".tg", ".check-one", 2, $(this).prop('checked'));
});
});
Here is my JSFiddle: https://jsfiddle.net/T3DDIE_B3AR/pe2usL5r/
i have a html table which i has many checkboxes. when user click on header checkbox then all child checkbox will be checked and unchecked based on header checkbox checked state.
user can uncheck and check any child checkbox too. i want to store child checkbox value in hidden field separated by comma. when child checkbox is selected then checkbox value will be store in hiiden field but if that checkbox value is in hiiden field then will not be store in hidden field.
when user uncheck anyone then that checkbox value will be removed from hidden field.
I tried this way but not successful. so guide me how to achieve it. my code as follows
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">
$(document).ready(function(){
$('#chckHead').click(function () {
$(".chcktbl").prop('checked', $(this).prop("checked"));
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function (index, obj) {
alert('pop');
if (this.checked === true) {
values.push($(this).val());
}
});
});
alert(values.toString());
});
You forget to assign the checkboxes values to the hidden input and also, you have to do so in the header checkbox event listener.
$(document).ready(function() {
var hidden = $('#hidden');
$('#chckHead').click(function() {
var state = $(this).prop('checked');
if(state === false) {
hidden.val('');
}
var vals = [];
$('.chcktbl').each(function() {
$(this).prop('checked', state);
if(this.checked === true) {
vals.push($(this).val());
}
});
hidden.val(vals.toString());
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function(index, obj) {
if(this.checked === true) {
values.push($(this).val());
}
});
hidden.val(values.toString());
});
});
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id="chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="101" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="102" />
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="103" />
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!--for the demo purpose, I changed the type of the input to 'text' to see the result, don't forget to change to 'hidden' again.-->
<input id="hidden" type="text" name="hidden">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hope I pushed you further.
You should be able to get all checked checkboxes with this selector:
$('input[type=checkbox]:checked')
Then you can call map to get all the ids and join them
string = $('input[type=checkbox]:checked').map(function(idx,element) {
return element.value;
}).join(',')
Then just listen the onChange event for all checkboxes and set the value for the hidden field.
I have a table as follows:
<table id="testTable" class="mainTable">
<thead>
<tr>
<th>Title</th>
<th>
Select All
<input type="checkbox" id="select_all">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 2</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 3</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 4</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
</tbody>
</table>
Currently, my JS code will get all first td elements from the table regardless of the checkbox, code is as follows:
$("#testTable tr").each(function() {
firsttd += $(this).find("td:first").html() + "\n";
});
However, I need to modify this so that my JS code will only get the first td element of the checked checkbox row.
You could add the condition directly on your selector like :
$("#testTable :checkbox:checked").each(function() {
firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});
Or if you're really in need of the loop and since you're using jQuery you could use .is(':checked') like :
if ( $(this).find(':checkbox').is(':checked') )
{
firsttd += $(this).find("td:first").html() + "\n";
}
Hope this helps.
var firsttd = "";
$("#testTable :checkbox:checked").each(function() {
firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});
console.log(firsttd);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable" border=1>
<thead>
<tr>
<th>Title</th>
<th>Select All <input type="checkbox" id="select_all"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td><input type="checkbox" class="checkbox" checked></td>
</tr>
<tr>
<td>Cell 2</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 3</td>
<td><input type="checkbox" class="checkbox" checked></td>
</tr>
<tr>
<td>Cell 4</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
</tbody>
Is this what you try to accomplish ? :
$("#testTable tr").each(function(){
firsttd += $(this).find('input[type="checkbox"]:selected').parent().html()+"\n";
});
You can simply only select the checked checkboxes directly in the JQuery selector with :checked :
$('#testTable tr input[type="checkbox"]:checked').each(function(){
firsttd += $(this).closest('tr').children().first().html()+"\n";
});
try this code with $(this).find(':checkbox').is(':checked')
$(document).ready(function() {
$(this).click(function() {
var firsttd = "";
$("#testTable > tbody > tr").each(function() {
if ($(this).find(':checkbox').is(':checked'))
firsttd += $(this).find("td:first").html() + "\n";
});
console.log(firsttd);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
<tr>
<th>Title</th>
<th>Select All <input type="checkbox" id="select_all"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 2</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 3</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 4</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
</tbody>
Find checkbox check it is checkd or not if it checked find its parents first td value in your variable.
var firsttd = '';
$("#testTable tbody tr td").each(function() {
if ($(this).find('input[type=checkbox]').is(":checked"))
firsttd += $(this).parent('tr').find("td:first").html() + "\n"
});
console.log(firsttd);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
<tr>
<th>Title</th>
<th>Select All
<input type="checkbox" id="select_all">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>
<input type="checkbox" class="checkbox" checked='checked'>
</td>
</tr>
<tr>
<td>Cell 2</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>Cell 3</td>
<td>
<input type="checkbox" class="checkbox" checked='checked'>
</td>
</tr>
<tr>
<td>Cell 4</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
</tbody>
</table>
To get the first td of the checked checkbox
var elems = $("#testTable tr td input[checked]");
var str = "";
for(var i=0;i<elems.length;i++){
str += $(elems[i]).parent().parent().text()+"\n";
}
console.log(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
<tr><th>Title</th><th>Select All <input type="checkbox" id="select_all"></th></tr>
</thead>
<tbody>
<tr><td>Cell 1</td><td><input type="checkbox" class="checkbox"></td></tr>
<tr><td>Cell 2</td><td><input checked type="checkbox" class="checkbox"></td></tr>
<tr><td>Cell 3</td><td><input checked type="checkbox" class="checkbox"></td></tr>
<tr><td>Cell 4</td><td><input type="checkbox" class="checkbox"></td></tr>
</tbody>
$(document).ready(function() {
var firsttd = "";
$("#testTable tr td input:checkbox:first-child:checked").each(function()
{
firsttd += $(this).parent().parent().find("td:first").html() + "\n";
});
console.log(firsttd);
});
Fiddle here
I'm having some list of HTML check box in the table and its related data. In the list if I have selected a check box that will move to the top of the list.
Below is my code it works in <div> but not in the <table>.
jQuery(function($) {
$('.t1 .group-title').each(function() {
$if(this.checked) {
$item.insertBefore($('.t1 .group-title').first())
} else {
$item.appendTo($item.data('group'))
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
You should bind the change event to checkbox element. Then based of checked state prepend()/append() parent tr element.
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
jQuery(function($) {
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
Try this code.
$('table').on('change', '[type=checkbox]', function() {
var $this = $(this);
var row = $this.closest('tr');
if ($this.prop('checked')) { // move to top
row.insertBefore(row.parent().find('tr:first-child'))
.find('label').html('move to bottom');
} else { // move to bottom
row.insertAfter(row.parent().find('tr:last-child'))
.find('label').html('move to top');
}
});
First you have to handle the event on change for the checkboxes, and then if the checkbox is checked you should prepend the tr parent to the tbody of your table.
$("#t1 input:checkbox").on("change",function(){
if(this.checked){
$("#t1 tbody").prepend($(this).parents("tr"))
}else{
$("#t1 tbody").append($(this).parents("tr"))
}
})
Here is a fiddle with your example working
https://jsfiddle.net/kLhxq3Lj/
I want to sum all the text box value in a html table row using jQuery.
here is the table:
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
</table>
Here is the jQuery function to add the value of all text box of class expenses and display the result in a text box of id expenses_sum.
$(document).ready(function() {
$(".expenses").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
$(".expenses").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#expenses_sum").val(sum.toFixed(2));
}
how to use this function for each row.
Firstly you have repeated the same id when they should be unique which means your HTML is invalid. You should use a common class instead.
To make this work you need to restrict the .expenses selector to only find the elements within the same row as the input which was changed. To do that you can use closest() to get the nearest parent tr, then find() to get all the inputs.
Also note there are several logic improvements you can make here:
remove the each() loop to add the event handler
providing the reference of calculateSum to the event handler so you can use the this keyword to traverse the DOM
provide a default value of 0 to the value to simplify the sum logic
hook to the change event as well as keyup for when users paste data in to the field. Try this:
$(document).ready(function() {
$(".expenses").on('keyup change', calculateSum);
});
function calculateSum() {
var $input = $(this);
var $row = $input.closest('tr');
var sum = 0;
$row.find(".expenses").each(function() {
sum += parseFloat(this.value) || 0;
});
$row.find(".expenses_sum").val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
</table>
you can use like this
$(document).on('keyup change','input.expenses',function(){
$expenses = $(this).parents('tr').find('.expenses');
$expenseTotal = $(this).parents('tr').find('#expenses_sum');
$expenseTotal.val('0');
$.each($expenses,function(index,object){
if($(object).val()!='')
{
$expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
}
});
});
see demo at - https://jsfiddle.net/Vesharj/zLg3pyq4/
Here is the right way to do this.
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
</table>
And js :
$(document).ready(function(){
$(".expenses").each(function() {
$(this).keyup(function(){
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expenses").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expenses_sum").val(sum.toFixed(2));
}
Hope, it helps