How do you display the Total using "onClick"?

How do you display the Total using "onClick"? - javascript

I am wrapping up a project, and suddenly stumped. I am trying to get the "Total" to display only when "CHECKOUT" is clicked. Currently, it populates automatically. I have looked online for different functions that do just that, but I am not having any luck. Any guidance is appreciated.
The pseudocode would look something like: onClick() return Total
$(document).ready(function() {
$(document).on("input paste keyup", ".product_qty", function(event) {
var product_quantity = 0;
var product_price = 0;
var gst_amount = 0;
var sub_total = 0;
var total_qty = 0;
var grand_total = 0
product_quantity = $(this).val();
product_price = $(this).parent().prev().html();
sub_total = product_price * product_quantity;
$(this).parent().next().html(sub_total);
$('.product_qty').each(function(k, v) {
product_quantity = parseInt($(this).val()) ? parseInt($(this).val()) : 0;
product_price = parseFloat($(this).parent().prev().html()) ? parseFloat($(this).parent().prev().html()) : 0;
console.log(product_quantity);
console.log(product_price);
sub_total = parseFloat(product_price * product_quantity);
console.log(sub_total);
total_qty += product_quantity;
grand_total += sub_total;
});
if (grand_total > 0) {
gst_amount = (grand_total * 8) / 100;
}
$("#total_qty").html(total_qty);
$("#total_amount").html(grand_total);
grand_total += gst_amount;
$("#gst_amount").html(gst_amount);
$("#discount_amount").html(0);
$("#grand_total").html(grand_total);
});
//
$(document).on("click", ".delete", function(event) {
var cart_item = 0;
$(this).parent().parent().remove();
cart_item = $('.product_qty').length;
if (cart_item <= 0) {
$("#total_qty").html('0');
$("#total_amount").html('0');
$("#gst_amount").html('0');
$("#discount_amount").html(0);
$("#grand_total").html('0');
} else {
$('.product_qty').trigger('keyup');
}
});
});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col class="con1" style="align: center; width: 30%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con0" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 10%" />
</colgroup>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Mens T Shirt</td>
<td class="product_price">25</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Hat</td>
<td class="product_price">15</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Womens T Shirt</td>
<td class="product_price">20</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Total</td>
<td> </td>
<td id="total_qty"></td>
<td id="total_amount"></td>
<td> </td>
</tr>
<tr>
<td>Tax (8%)</td>
<td> </td>
<td> </td>
<td id="gst_amount"></td>
<td> </td>
</tr>
<tr>
<td colspan="5" class="checkout">CHECKOUT</td>
</tr>
<tr>
<td>Total Payment</td>
<td> </td>
<td> </td>
<td id="grand_total"></td>
<td> </td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>

Instead of running the total code in the input paste keyup handler, run it in a click handler for the CHECKOUT link.
$(document).ready(function() {
$(".checkout a").on("click", function(event) {
var total_qty = 0;
var grand_total = 0
$('.product_qty').each(function(k, v) {
product_quantity = parseInt($(this).val()) ? parseInt($(this).val()) : 0;
product_price = parseFloat($(this).parent().prev().html()) ? parseFloat($(this).parent().prev().html()) : 0;
console.log(product_quantity);
console.log(product_price);
var sub_total = parseFloat(product_price * product_quantity);
console.log(sub_total);
total_qty += product_quantity;
grand_total += sub_total;
});
if (grand_total > 0) {
gst_amount = (grand_total * 8) / 100;
}
$("#total_qty").html(total_qty);
$("#total_amount").html(grand_total);
grand_total += gst_amount;
$("#gst_amount").html(gst_amount);
$("#discount_amount").html(0);
$("#grand_total").html(grand_total);
});
$(document).on("input paste keyup", ".product_qty", function(event) {
var product_quantity = 0;
var product_price = 0;
var gst_amount = 0;
var sub_total = 0;
product_quantity = $(this).val();
product_price = $(this).parent().prev().html();
sub_total = product_price * product_quantity;
$(this).parent().next().html(sub_total);
});
//
$(document).on("click", ".delete", function(event) {
var cart_item = 0;
$(this).parent().parent().remove();
cart_item = $('.product_qty').length;
if (cart_item <= 0) {
$("#total_qty").html('0');
$("#total_amount").html('0');
$("#gst_amount").html('0');
$("#discount_amount").html(0);
$("#grand_total").html('0');
} else {
$('.product_qty').trigger('keyup');
}
});
});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col class="con1" style="align: center; width: 30%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con0" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 10%" />
</colgroup>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Mens T Shirt</td>
<td class="product_price">25</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Hat</td>
<td class="product_price">15</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Womens T Shirt</td>
<td class="product_price">20</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Total</td>
<td> </td>
<td id="total_qty"></td>
<td id="total_amount"></td>
<td> </td>
</tr>
<tr>
<td>Tax (8%)</td>
<td> </td>
<td> </td>
<td id="gst_amount"></td>
<td> </td>
</tr>
<tr>
<td colspan="5" class="checkout">CHECKOUT</td>
</tr>
<tr>
<td>Total Payment</td>
<td> </td>
<td> </td>
<td id="grand_total"></td>
<td> </td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>

I know Bramar helped you already, i just wanted to make a little bit cleaner your code.
$(document).on("input paste keyup", ".product_qty", function(event){totals(this)});
//
$(document).on("click", ".delete", function(event){
var cart_item = $('.product_qty').length;
$(this).parent().parent().remove();
if (cart_item <= 0)
$("#total_qty, #total_amount, #gst_amount, #discount_amount, #grand_total").html(0);
else
$('.product_qty').trigger('keyup');
});
getCheckout = function(){$("#grand_total").html(global_grand_total)}
var global_grand_total = 0;
totals = function(obj){
var product_quantity = $(obj).val();
var product_price = $(obj).parent().prev().html();
var sub_total = product_price * product_quantity;
var gst_amount = 0, total_qty = 0, grand_total = 0;
$(obj).parent().next().html(sub_total);
$('.product_qty').each(function(k, v) {
total_qty += product_quantity = v.value|0 ? v.value|0 : 0;
product_price = +(temp = $(obj).parent().prev().html()) ? +temp : 0;
grand_total += sub_total = +product_price * +product_quantity;
});
if (grand_total)
gst_amount = grand_total * 8 / 100;
$("#total_qty").html(total_qty);
$("#total_amount").html(grand_total);
grand_total += gst_amount;
$("#gst_amount").html(gst_amount);
$("#discount_amount").html(0);
global_grand_total = grand_total;
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col class="con1" style="align: center; width: 30%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con0" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 10%" />
</colgroup>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Mens T Shirt</td>
<td class="product_price">25</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Hat</td>
<td class="product_price">15</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Womens T Shirt</td>
<td class="product_price">20</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td>x</td>
</tr>
<tr>
<td>Total</td>
<td> </td>
<td id="total_qty"></td>
<td id="total_amount"></td>
<td> </td>
</tr>
<tr>
<td>Tax (8%)</td>
<td> </td>
<td> </td>
<td id="gst_amount"></td>
<td> </td>
</tr>
<tr>
<td colspan="5" class="checkout">CHECKOUT</td>
</tr>
<tr>
<td>Total Payment</td>
<td> </td>
<td> </td>
<td id="grand_total"></td>
<td> </td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>

Related

calculating sum and subtraction of table row using jquery

i want to calculate sum of all columns, and subtraction of col1 and col2 only, i found few examples online to add row data but how i can perform both action on one row. using class or id name.
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>
jquery:
function calculate(){
var col1=$('.col1').text();
var col2=$('.col2').text();
var col3=$('.col3').text();
var sum= col1+col2+col3;
var subtract= col1-col2;
$(".sum").text(sum);
$(".subtract").text(subtract);
}
JSFiddle

Loop through all the table tr and use .find() on the columns you need. I added .col on each of the value columns so we won't need to specify the three columns on addition.
function calculate() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).html());
});
difference = parseFloat($(this).find(".col1").html()) - parseFloat($(this).find(".col2").html());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1">1</td>
<td class="col col2">2</td>
<td class="col col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1">43</td>
<td class="col col2">432</td>
<td class="col col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick="calculate()">calculate</button>
Here's the answer using input fields;
$(document).ready(function() {
$("#calculate").on("click", function() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).find("input").val());
});
difference = parseFloat($(this).find(".col1").find("input").val()) - parseFloat($(this).find(".col2").find("input").val());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1"><input value="1" /></td>
<td class="col col2"><input value="2" /></td>
<td class="col col3"><input value="3" /></td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1"><input value="43" /></td>
<td class="col col2"><input value="432" /></td>
<td class="col col3"><input value="33" /></td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate">Sum
</button>

Please check this working example.
var col1=0,col2=0,col3=0,sum=0,subtract=0;
function calculate(){
$(".jsTableBody tr").each(function(){
col1=$(this).find('.col1').text();
col2=$(this).find('.col2').text();
col3=$(this).find('.col3').text();
sum= parseInt(col1) + parseInt(col2)+ parseInt(col3);
console.log(sum);
subtract= parseInt(col1)-parseInt(col2);
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(subtract);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody class="jsTableBody">
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>

Filter Table per columb

I have code here which filtering table doesn't work, then I want the status filter with checkbox, what I have to do?, please help me!
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px">Program1
</td>
<td width="10px">2012
</td>
<td width="20px">Province1
</td>
<td width="20px">Municipality/LGU1
</td>
<td width="20px">Barangay1
</td>
<td width="30px">Project1
</td>
<td width="20px">200000
</td>
<td width="20px">completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px">Program1
</td>
<td width="10px">2013
</td>
<td width="20px">Province2
</td>
<td width="20px">Municipality/LGU2
</td>
<td width="20px">Barangay2
</td>
<td width="30px">Project2
</td>
<td width="20px">500000
</td>
<td width="20px">ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px">Program3
</td>
<td width="10px">2014
</td>
<td width="20px">Province3
</td>
<td width="20px">Municipality/LGU3
</td>
<td width="20px">Barangay3
</td>
<td width="30px">Project3
</td>
<td width="20px">6000000
</td>
<td width="20px">suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px">Program4
</td>
<td width="10px">2016
</td>
<td width="20px">Province4
</td>
<td width="20px">Municipality/LGU4
</td>
<td width="20px">Barangay4
</td>
<td width="30px">Project4
</td>
<td width="20px">1000000
</td>
<td width="20px">cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
Thank you in advance!

What you have done in your javaScript / Jquery side is correct. You missed to add the relevant class names to your HTML. I added classes for year (and I made a change to have 2 records for 2012) and allocation and it seems working.
Try searching with year = 2012 and allocation = 200000
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px">Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px">Province1
</td>
<td width="20px">Municipality/LGU1
</td>
<td width="20px">Barangay1
</td>
<td width="30px">Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px">completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px">Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px">Province2
</td>
<td width="20px">Municipality/LGU2
</td>
<td width="20px">Barangay2
</td>
<td width="30px">Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px">ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px">Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px">Province3
</td>
<td width="20px">Municipality/LGU3
</td>
<td width="20px">Barangay3
</td>
<td width="30px">Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px">suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px">Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px">Province4
</td>
<td width="20px">Municipality/LGU4
</td>
<td width="20px">Barangay4
</td>
<td width="30px">Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px">cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>

I have changed code and working for status as well
fiddle: https://codepen.io/creativedev/pen/yEOPbz
$(document).ready(function(){
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
});
var len = $i.length;
if (len === 0)
return $rows.show();
var cls = '.' + $i.map(function () {
return this.className;
}).get().join(',.');
if(cls.indexOf(",") > -1){
var array = cls.split(",");
$.each(array,function(i){
$rows.hide().filter(function () {
return $('td', this).filter(function () {//console.log(this);
var content = this.textContent,
inputVal = $i.filter(array[i]).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length == len;
}).show();
});
}else{
$rows.hide().filter(function () {
return $('td', this).filter(function () {
var content = this.textContent,
inputVal = $i.filter(cls).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
}
});
});

How to get checkbox value and store in a array

In my project, I want to instor checkbox value to array.
Here is my code:
$('#fpdId').click(function(){
var files = new Array();
//xzyId is table id.
$('#xzyId tbody tr input:checkbox').each(function() {
if (this.checked) {
files.push(this.value);
}
});
console.log(files);
});
<input type="button" id="fpdId" value="filePack">
My html table has three rows and each row has three tds
Here is table code:
<table border=1px class="xzy" id="xzyId" style="width:100%">
<colgroup>
<col style="width:10%">
<col style="width:80%">
<col style="width:10%">
</colgroup>
<tbody>
<tr>
<td ><input type="checkbox" value="x" >1</td>
<td >Stack</td>
<td >John</td>
</tr>
<tr>
<td ><input type="checkbox" value="y" >2</td>
<td >Stack</td>
<td >Sansa</td>
</tr>
<tr>
<td ><input type="checkbox" value="z" >3</td>
<td >Stack</td>
<td >Aya</td>
</tr>
</tbody>
</table>
But unlucky, the array is empty, What is wrong?

It will be helpful to you
I have changed.
if ($(this).is(':checked')) {
}
$("document").ready(function(){
$('#fpdId').click(function(){
var files = new Array();
//xzyId is table id.
$('#xzyId tbody tr input:checkbox').each(function() {
if ($(this).is(':checked')) {
files.push(this.value);
}
});
console.log(files);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1px class="xzy" id="xzyId" style="width:100%">
<colgroup>
<col style="width:10%">
<col style="width:80%">
<col style="width:10%">
</colgroup>
<tbody>
<tr>
<td ><input type="checkbox" value="x" >1</td>
<td >Stack</td>
<td >John</td>
</tr>
<tr>
<td ><input type="checkbox" value="y" >2</td>
<td >Stack</td>
<td >Sansa</td>
</tr>
<tr>
<td ><input type="checkbox" value="z" >3</td>
<td >Stack</td>
<td >Aya</td>
</tr>
</tbody>
</table>
<input type="button" id="fpdId" value="filePack">

Show in jQuery seach the closest TR that was a header from data

This is my fiddle: https://jsfiddle.net/qpouvped/2/
What I want to do is display the header with the corresponding alphabetical letter of the searched name. But I had no success!
If you see the code and look for "Nanana", I want to display this line, and the gray header C, of which "Nanana" belongs.
Can anyone help me with this?
My HTML:
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td >137418</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td >133</td>
<td >Nanana Nonono Nonono</td>
<td >11225566</td>
</tr>
</tbody>
</table>
My jQuery:
$(".filter-nome").keyup(function(){
var value = $(this).val();
$(".lista-certidoes tbody tr").each(function(index){
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) != 0) {
$(this).hide();
} else {
$(this).show();
//$(this).parent('tbody').next('td.cab_interno').show();
}
});
});

The alphabetic heading is a previous sibling of the closest tr, so you want to use .prevAll(). These are returned in order of distance from the current row, so the first one will be the heading for that group.
You also shouldn't process the heading rows in the .each() loop. Just hide everything first, and show the data rows that match, along with their headings.
$(".filter-nome").keyup(function() {
var value = $(this).val();
if (value == "") {
// Show everything when filter is empty
$(".lista-certidoes tbody tr").show();
return;
}
$(".lista-certidoes tbody tr").hide();
$(".lista-certidoes tbody tr:not(.subtitulo)").each(function(index) {
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) == 0) {
$row.show();
$row.closest("tr").prevAll(".subtitulo").first().show();
}
});
});
.lista-certidoes {
.cab_interno {
background-color: #333;
color: #fff;
text-align: center;
padding: 8px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td>137418</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr>
<td>133</td>
<td>Nanana Nonono Nonono</td>
<td>11225566</td>
</tr>
</tbody>
</table>

How to sum Jquery Outputs

I created couple of rows and multiplied some data to get totals:
But I am not sure how to sum all the totals and print it in "Cash in Hand" row.
Following are my codes:
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td><input type="text" name="pages" class="row1" /></td>
<td><span class="row1c">0.00</span></td>
</tr>
<tr>
<td>500 Tk Note</td>
<td><input type="text" name="pages" class="row2" /></td>
<td><span class="row2c">0.00</span></td>
</tr>
<tr>
<td>100 Tk Note</td>
<td><input type="text" name="pages" class="row3" /></td>
<td><span class="row3c">0.00</span></td>
</tr>
<tr>
<td>50 Tk Note</td>
<td><input type="text" name="pages" class="row4" /></td>
<td><span class="row4c">0.00</span></td>
</tr>
<tr>
<td colspan ="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span></td>
</tr>
</table>
All codes together here:
https://jsfiddle.net/rashelmiah/fb9opo36/1/
Could you please me find a way to sum all the totals?
Thanks in advance.

You need add the following code.
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total);
})
Note: Your code had a lot of <script> tags which was unnecessary. And a lot of ready() function, which was unnecessary too. You can wrap the whole code inside one <script> tag and one ready() function.
Demo:
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td>
<input type="text" name="pages" class="row1" />
</td>
<td><span class="row1c">0.00</span>
</td>
</tr>
<tr>
<td>500 Tk Note</td>
<td>
<input type="text" name="pages" class="row2" />
</td>
<td><span class="row2c">0.00</span>
</td>
</tr>
<tr>
<td>100 Tk Note</td>
<td>
<input type="text" name="pages" class="row3" />
</td>
<td><span class="row3c">0.00</span>
</td>
</tr>
<tr>
<td>50 Tk Note</td>
<td>
<input type="text" name="pages" class="row4" />
</td>
<td><span class="row4c">0.00</span>
</td>
</tr>
<tr>
<td colspan="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span>
</td>
</tr>
</table>

We Keep Coding

JavaScript is the programming language of the Web.

How do you display the Total using "onClick"? - javascript

Related

calculating sum and subtraction of table row using jquery

Filter Table per columb

How to get checkbox value and store in a array

Show in jQuery seach the closest TR that was a header from data

How to sum Jquery Outputs

Categories

Resources