I want to calculate the sum of a column consisting multiple row
the values are retrieved from the database and can also be manually alter/
The issue is without the input event, the function are not triggered.
So when the column display multiple rows value, the total amount wont show.
Any idea.Thanks in advance
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>A :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10"/></td>
</tr>
<tr>
<td><span>C :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
$(document).ready(function(){
$("#myTable").on('input', '.txtCal', function () {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
}
calculate();
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>A :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10"/></td>
</tr>
<tr>
<td><span>C :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
You should move code that calculates price to separate function and call it on 'domready' and 'input' events.
This may helpful
$(document).ready(function(){
var calculated_total_sum;
calSum();
$("#myTable").on('input', '.txtCal', function () {
calSum();
});
function calSum()
{
calculated_total_sum=0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
}
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr> <th width="100">Name </th>
<th>Price</th>
</tr>
<tr>
<td><span>A :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span>B :</span></td>
<td><input type="text" class='txtCal' value="10"/></td>
</tr>
<tr>
<td><span>C :</span></td>
<td><input type="text" class='txtCal' value="10" /></td>
</tr>
<tr>
<td><span><b>TOTAL :</b></span></td>
<td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>
Just change when the event calculate the value. In your code, you triggered the calculation when the txtCal class are input. You have to create a separate function like this:
function calculate() {
var calculated_total_sum = 0;
$("#myTable .txtCal").each(function () {
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
}
$(document).ready(function(){
calculate();
$("#myTable").on('input', '.txtCal', function () {
calculate();
}
});
Hope it helps you
Make a separate function and call it on input and to get the sum when page gets ready with values from database, call it inside document.ready like given below:
function getSum()
{
$("#myTable .txtCal").each(function () {
var calculated_total_sum = 0;
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
});
$("#total_sum_value").html(calculated_total_sum);
});
}
$(document).ready(function(){
getSum();
$("#myTable").on('input', '.txtCal', function () {
getSum();
});
});
Related
This is dynamic table pic:
My problem is when I click the + button, Sno number should be incremented and then presented in the text box of the table.
I have so far tried but I don't achieve any answer. Please help me to solve this problem and thanks
View page code:
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>
<tr >
<td></span></td>
<td><input style="width:50px" type="text" name="sno[]" value="1"></td>
<td><input style="width:100px" class ="rate" type="text" name="rate[]"></td>
<td><select style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<?php foreach ($itemname as $row ): ?>
<option value="<?=$row['id']?>" <?php echo set_select('itemname', $row['id']); ?>><?=$row['itemname']?></option>
<?php endforeach ?>
</select></td>
<td><input style="width:60px" class="qty" type="text" name="qty[]"></td>
<td><input style="width:70px" class="unit" type="text" name="unit[]"></td>
<td><input style="width:100px" class="total" type="text" name="total[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>
</tr>
</tbody>
</table>
Javascript code to add rows and delete rows:
<script>
$(function(){
$('#addMore').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
Add some to JS code:
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var l = $('#tb3').find('tbody').find('tr').length;
var s = $('#tb3')
.find('tbody')
.find('tr')
.eq(l-2)
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data.find('td').eq(1).find("input").val(sp);
});
or
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var s = data
.prev()
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data
.find('td')
.eq(1)
.find("input")
.val(sp);
});
Also, change id of AddButton to a class.
$(function(){
$('.addMore').on('click', function() {
var data = $(this)
.parent()
.parent()
.last('tr')
.clone(true)
.appendTo($('#tb3').find('tbody'));
data.find("input").val('');
var l = $('#tb3').find('tbody').find('tr').length;
var s = $('#tb3')
.find('tbody')
.find('tr')
.eq(l-2)
.find('td')
.eq(1)
.find('input')
.val();
var sp = Number(s) + 1;
data.find('td').eq(1).find("input").val(sp);
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>
<tr >
<td></span></td>
<td><input style="width:50px" type="text" name="sno[]" value="1"></td>
<td><input style="width:100px" class ="rate" type="text" name="rate[]"></td>
<td><select style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<option value="23423">itemname</option>
<?php endforeach ?>
</select></td>
<td><input style="width:60px" class="qty" type="text" name="qty[]"></td>
<td><input style="width:70px" class="unit" type="text" name="unit[]"></td>
<td><input style="width:100px" class="total" type="text" name="total[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" class="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus">Add</span></td>
</tr>
</tbody>
</table>
Set class name for sno[] input field
For example :
<td><input style="width:50px" class="sno" type="text" name="sno[]" value="1"></td>.
Call the ApplySerialNO() function in add row and remove row function
$('#addMore').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
ApplySerialNO();
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
$('.qty').trigger('change');
ApplySerialNO();
} else {
alert("Sorry!! Can't remove first row!");
}
});
This function is clear the old value and append the new serial no
function ApplySerialNO() {
var count = 1;
$(".sno").each(function() {
var selectedTr = $(this);
selectedTr.val('');
selectedTr.val(count);
count++;
});
}
I have an html table with many check boxes. If I select the first check box, the next one is automatically selected. Does someone know how to do this? Also, the exact row number in table is unknown.
function toggle(source) {
var row_index = $("#checkFirst").index();
var row_first = $(".row").index();
checkboxes = document.getElementsByName('row');
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (i == row_index && i == row_first) {
checkboxes[i].checked = source.checked;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>
<td><input type="checkbox" id="checkFirst" onClick="toggle(this)" /></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
You can use below code for this. First give class checkbox to all other checkboxes. Hope this can help you
$(function(){
$("#checkFirst").click(function () {
$('.checkbox').attr('checked', this.checked);
});
$(".checkbox").click(function(){
if($(".checkbox").length == $(".checkbox:checked").length) {
$("#checkFirst").attr("checked", "checked");
} else {
$("#checkFirst").removeAttr("checked");
}
});
});
You can try with below code. It will help you.
jQuery file:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
<table>
<tbody data-bind="foreach: list">
<tr id="first">
<td><input type="checkbox" id="checkfirst" onClick="toggle('first',this.id)"/></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
</tr>
<tr id="second">
<td><input type="checkbox" id="checksecond" onClick="toggle('second',this.id)"/></td>
<td><input type="checkbox" ></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>
Script
<script>
function toggle(source,id) {
chcked = $('#'+id).prop( "checked" );
if(chcked)
{
$('#'+source+' :checkbox').each(function() {
this.checked = true;
});
}
else
{
$('#'+source+' :checkbox').each(function() {
this.checked = false;
});
}
}
</script>
You can try this snippet.
function handleCheck(e) {
let will_change = false;
if (e.shiftKey && this.checked) {
checkboxes.forEach(element => {
if (element === this || element === last_checked) {
will_change = !will_change;
}
if (will_change) {
element.checked = true;
}
});
}
last_checked = this;
}
Then add a click event listener to each of the checkboxes you want to act as a group
https://codepen.io/anon/pen/GyQEJZ
this makes the first checkbox a global control for all
$('#checkFirst').on('change',function(){
if($(this).is(':checked'))
$('input[type="checkbox"]').prop('checked', true);
else
$('input[type="checkbox"]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>
<td><input type="checkbox" id="checkFirst"/></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
and this is to select the following checkboxes in the same row
$('input[type="checkbox"]').on('change',function(){
$(this).parent().nextAll().find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
});
I want to copy and paste excel columns or any similar lists into HTML table. I have found this code, but there is an issue. It pastes data like a row. So how can I change It to paste like a column? Thanks in advance.
$(document).ready(function() {
$('td input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().next().find('input');
} else{
input = input.parent().parent().next().find('input');
}
}
}, 0);
});
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
Here is solution for you:
$(document).ready(function() {
$('td input').bind('paste', null, function(e) {
$input = $(this);
setTimeout(function() {
var values = $input.val().split(/\s+/),
row = $input.closest('tr'),
col = $input.closest('td').index();
console.log(col);
for (var i = 0; i < values.length; i++) {
row.find('input').eq(col).val(values[i]);
row = row.next();
}
}, 0);
});
});
I am trying to calculate the sum of text fields from a row which are checked.
My code works fine, but the problem which I am facing is my only calculate the value of first row only and it to previous result every time instead of adding current text field value.
Here is working fiddle:
https://jsfiddle.net/infohassan/27L6wvgw/
Here is my JS code:
$(document).ready(function(){
var $checkboxes = $('input[name^="txtChecked"]');
$checkboxes.change(function() {
$('input[name^="txtChecked"]').each(function() {
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
calculateTotal();
});
});
});
function calculateTotal() {
var total = 0;
$('input[name^="txtChecked"]:checked').each(function(){
var val = parseFloat($('input[name^="txtCostAmount"]').val());
total += val;
});
$('input[name="txtNetAmount"]').val(total);
}
I cleaned your event handler...
And I made the .each() loop look for the text input which is on the same tr as the checkbox...
UpdatedFiddle
$(document).ready(function(){
var $checkboxes = $('input[name^="txtChecked"]');
$checkboxes.change(function() {
//$('input[name^="txtChecked"]').each(function() {
//var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
calculateTotal();
//});
});
});
function calculateTotal() {
var total = 0;
$('input[name^="txtChecked"]:checked').each(function(){
var val = parseFloat($(this).parents("tr").find('input[name^="txtCostAmount"]').val());
total += val;
});
$('input[name="txtNetAmount"]').val(total);
}
$(document).ready(function(){
var $checkboxes = $('input[name^="txtChecked"]');
$checkboxes.change(function() {
// var countCheckedCheckboxes = $checkboxes.find(':checked').length;
calculateTotal();
});
});
function calculateTotal() {
var total = 0;
$('input[name^="txtChecked"]:checked').each(function(index, item){
var parent = $(item).closest('tr');
var val = parseFloat(parent.find('input[name^="txtCostAmount"]').val());
total += val;
});
$('input[name="txtNetAmount"]').val(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th>Items</th>
<th>Cost</th>
</thead>
<tbody>
</tbody>
<tr>
<td><input name="txtChecked0" type="checkbox"></td>
<td>Item Name 1</td>
<td><input class="form-control input-sm" name="txtCostAmount0" value="3500" type="text"></td>
</tr>
<tr>
<td><input name="txtChecked1" type="checkbox"></td>
<td>Item Name 2</td>
<td><input class="form-control input-sm" name="txtCostAmount1" value="4500" type="text"></td>
</tr>
<tr>
<td><input name="txtChecked2" type="checkbox"></td>
<td>Item Name 3</td>
<td><input class="form-control input-sm" name="txtCostAmount2" value="4500" type="text"></td>
</tr>
</table>
<p>NetAmount <input class="form-control" name="txtNetAmount" value="0.00" readonly="" type="text"></p>
Hi in below JavaScript code the multiplication is betweentxtQuantity which is textbox TemplateField in grid view and price which is BoundField in grid view.
My issue is my grid view have both txtQuantity and txtPrice as TemplateFieldes
<ItemTemplate><asp:TextBox ID="txtprice" runat="server" Text='<%# Bind("Price") %>'></asp:TextBox></ItemTemplate>
<ItemTemplate><asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox></ItemTemplate>
i have tried to modify the java-script code
$("[id*=lblTotal]", row).html(parseFloat($("[id*=txtprice]", row).html()) * parseFloat($(this).val()));
but it give me NaNas result of multiplication
Original js code
<script type="text/javascript">
$(function () {
$("[id*=txtQuantity]").val("0");
});
$("[id*=txtQuantity]").live("change", function () {
if (isNaN(parseInt($(this).val()))) {
$(this).val('0');
} else {
$(this).val(parseInt($(this).val()).toString());
}
});
$("[id*=txtQuantity]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
}
} else {
$(this).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
</script>
There are some minor issues with your code, try this:
$(function () {
$("[id*=txtQuantity").val("0");
});
$(document).on("change", "[id*=txtQuantity]", function () {
if (isNaN(parseInt($(this).val()))) {
$(this).val('0');
} else {
$(this).val(parseInt($(this).val()).toString());
}
});
$(document).on("keyup mouseup", "[id*=txtQuantity]", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($("[id*=txtPrice]", row).val()) * parseFloat($(this).val()));
}
} else {
$(this).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
var value = $(this).html();
if(value != "")
grandTotal = grandTotal + parseFloat(value);
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="5">
<tr>
<td><input type="text" id="txtPrice1" value="100" /></td>
<td><input type="text" id="txtQuantity1" value="1" /></td>
<td><div id="lblTotal1" /></td>
</tr>
<tr>
<td><input type="text" id="txtPrice2" value="200" /></td>
<td><input type="text" id="txtQuantity2" value="2" /></td>
<td><div id="lblTotal1" /></td>
</tr>
<tr>
<td><input type="text" id="txtPrice3" value="300" /></td>
<td><input type="text" id="txtQuantity3" value="3" /></td>
<td><div id="lblTotal1" /></td>
</tr>
</table>
<div id="lblGrandTotal" />