Filter Table per columb - javascript

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();
}
});
});

Related

Change to total price field in not reflecting

Below are my html code and onchange(). I am not getting any error message but the changes I require in the
The html is for a shopping cart where there are columns for each product that is in the cart and the last column of each row is for the total price of the product which needs to be changed as we increase the quantity.
function WO() {
var tbody = document.getElementById("cartSection");
for (var i = 0; i < tbody.rows.length; i++) {
var row = tbody.rows[i];
var qty = row.cells[3].childNodes[0].value;
var price = row.cells[2].childNodes[0].nodeValue;
var answer = (Number(qty) * Number(price)).toFixed(2);
row.cells[5].childNodes[0].nodeValue = answer;
}
document.getElementById("inputNumber").onchange = function() {
myFunction()
};
function myFunction() {
row.cells[5].childNodes[0].nodeValue = (Number(qty) * Number(price)).toFixed(2);
};
};
WO();
<div class="cart-section">
<table class="table cart-table table-responsive-xs striped-table">
<thead>
<tr class="table-head">
<th scope="col">image</th>
<th scope="col">product name</th>
<th scope="col">price</th>
<th scope="col">quantity</th>
<th scope="col">action</th>
<th scope="col">total</th>
</tr>
</thead>
<tbody id="cartSection">
<tr>
<td>
<img src="/web/product/89/1569065085-thumb.jpg" alt="">
</td>
<td>Black formal shoe
</td>
<td class="amount">
449.00</td>
<td>
<input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">898.00</td>
</tr>
<tr>
<td>
<img src="/web/product/94/1569065206-thumb.jpg" alt="">
</td>
<td>Slim brown leather shoe
</td>
<td class="amount">
800.00</td>
<td>
<input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1600.00</td>
</tr>
<tr>
<td>
<img src="/web/product/93/1569065178-thumb.jpg" alt="">
</td>
<td>Dual Colour Formal
</td>
<td class="amount">
500.00</td>
<td>
<input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1000.00</td>
</tr>
</tbody>
</table>
<table class="table cart-table table-responsive-md">
<tfoot>
<tr>
<td>total price :</td>
<td>
<h2>$6935.00</h2>
</td>
</tr>
</tfoot>
</table>
<div class="row cart-buttons">
<div class="col-6">continue shopping</div>
<div class="col-6">check out</div>
</div>
</div>

Here is a start. You had many issues
function WO() {
var tbody = document.getElementById("cartSection");
for (var i = 0; i < tbody.rows.length; i++) {
var row = tbody.rows[i];
var qty = row.cells[3].childNodes[0].value;
var price = row.cells[2].childNodes[0].nodeValue;
var answer = (Number(qty) * Number(price)).toFixed(2);
row.cells[5].childNodes[0].nodeValue = answer;
}
document.getElementById("cartSection").addEventListener("change",function(e) {
var tgt = e.target;
if (tgt.name==="quantity") {
var row = tgt.closest("tr");
var qty = Number(tgt.value);
var amt = Number(row.querySelector(".amount").innerText.trim());
console.log(qty,amt)
row.querySelector(".totalprice").innerText = (amt*qty).toFixed(2);
}
})
};
WO();
<div class="cart-section">
<table class="table cart-table table-responsive-xs striped-table">
<thead>
<tr class="table-head">
<th scope="col">image</th>
<th scope="col">product name</th>
<th scope="col">price</th>
<th scope="col">quantity</th>
<th scope="col">action</th>
<th scope="col">total</th>
</tr>
</thead>
<tbody id="cartSection">
<tr>
<td>
<img src="/web/product/89/1569065085-thumb.jpg" alt="">
</td>
<td>Black formal shoe
</td>
<td class="amount">
449.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">898.00</td>
</tr>
<tr>
<td>
<img src="/web/product/94/1569065206-thumb.jpg" alt="">
</td>
<td>Slim brown leather shoe
</td>
<td class="amount">
800.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1600.00</td>
</tr>
<tr>
<td>
<img src="/web/product/93/1569065178-thumb.jpg" alt="">
</td>
<td>Dual Colour Formal
</td>
<td class="amount">
500.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1000.00</td>
</tr>
</tbody>
</table>
<table class="table cart-table table-responsive-md">
<tfoot>
<tr>
<td>total price :</td>
<td>
<h2>$6935.00</h2>
</td>
</tr>
</tfoot>
</table>
<div class="row cart-buttons">
<div class="col-6">continue shopping</div>
<div class="col-6">check out</div>
</div>
</div>
UPDATE: Trigger the change on each to calculate from start. Missing here is a totalling of all
window.addEventListener("load", function() {
[...document.querySelectorAll("[name=quantity]")].forEach(function(qty) {
qty.addEventListener("change", function(e) {
var tgt = e.target;
var row = tgt.closest("tr");
var qty = Number(tgt.value);
var amt = Number(row.querySelector(".amount").innerText.trim());
row.querySelector(".totalprice").innerText = (amt * qty).toFixed(2);
});
});
var event = new Event('change');
// Dispatch it.
[...document.querySelectorAll("[name=quantity]")].forEach(function(qty) {
qty.dispatchEvent(event);
})
})
<div class="cart-section">
<table class="table cart-table table-responsive-xs striped-table">
<thead>
<tr class="table-head">
<th scope="col">image</th>
<th scope="col">product name</th>
<th scope="col">price</th>
<th scope="col">quantity</th>
<th scope="col">action</th>
<th scope="col">total</th>
</tr>
</thead>
<tbody id="cartSection">
<tr>
<td>
<img src="/web/product/89/1569065085-thumb.jpg" alt="">
</td>
<td>Black formal shoe
</td>
<td class="amount">
449.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice"></td>
</tr>
<tr>
<td>
<img src="/web/product/94/1569065206-thumb.jpg" alt="">
</td>
<td>Slim brown leather shoe
</td>
<td class="amount">
800.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice"></td>
</tr>
<tr>
<td>
<img src="/web/product/93/1569065178-thumb.jpg" alt="">
</td>
<td>Dual Colour Formal
</td>
<td class="amount">
500.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice"></td>
</tr>
</tbody>
</table>
<table class="table cart-table table-responsive-md">
<tfoot>
<tr>
<td>total price :</td>
<td>
<h2>$6935.00</h2>
</td>
</tr>
</tfoot>
</table>
<div class="row cart-buttons">
<div class="col-6">continue shopping</div>
<div class="col-6">check out</div>
</div>
</div>

How do you display the Total using "onClick"?

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>

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">

How to get table header cell's name when am using colspan peoprty?

here I want to get the header cells name from table when am clicking on td who has specific class and colspan property, means when am clicking on td who has colspan property that should show all it's header cells name covered by it
like bellow snap
i have a code that is returning only the first header cell name the script code is as bellow
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var rowheader = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
alert("header=" + rowheader.innerHTML);
});
HTML is as bellow
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4" class="displaysingledata>row1</td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2" class="displaysingledata"></td>
<td id="1_3"></td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7" class="displaysingledata"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10" class="displaysingledata">row2</td>
<td id="2_0"></td>
<td id="2_1" class="displaysingledata"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displayMultipledata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
for a single cell the script i have included that is working,i need to deal with colspan which covers multiple header cells

You can use the colspan to define the number of headers you'll need.
Be aware that the index of the click cell. For example, in row1, there is a merged cell, this counts as one! Not two!
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan = $(this).attr('colspan'),
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Alternativ that works on all cells
$('#example').on('click', 'td:not(:first-of-type)', function (e) {
var colspan = 1,
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
if( $(this).attr('colspan') ) {
colspan = $(this).attr('colspan');
}
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>

Use $(this).attr('colspan') to find the colspan number for td and iterate loop through th cells to get th cell values. Please check below snippet for more understanding.
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan_number = parseInt($(this).attr('colspan'));
var prevCells = $(this).prevAll();
var previousColSpan = 0;
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
previousColSpan += (parseInt($(this).attr('colspan'))-1);
}
});
var total_cells = 1;
if(parseInt(colspan_number)>0){
total_cells = colspan_number;
}
var rowheaders = '';
for(var i=0;i<total_cells;i++){
rowheaders += e.delegateTarget.tHead.rows[0].cells[(this.cellIndex + previousColSpan + i)].innerHTML + "\n";
}
alert("headers : \n" + rowheaders);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>

HTML input in table not responding to onkeyup

Here is the code initializing my Table:
<table cellspacing="0">
<caption id="title4">
Sprinkles (5 - 6 oz.)
</caption>
<thead>
<tr>
<th> </th>
<td >Price</td>
<td >Quantity</td>
</tr>
</thead>
<tbody>
<tr class="statement4">
<th><label>Lemon</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s1" name="s1" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Apple</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s2" name="s2" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Caramel</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s3" name="s3" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Cinnamon</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s4" name="s4" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Sweet Mocha</label></th>
<td title="Yes" >
<label>$6.50</label>
</td>
<td title="No" >
<input id="s5" name="s5" class="field text small" type="text" value="0"/>
</td>
</tr>
</tbody>
</table>
And here is my javascript:
<script type="text/javascript">
var total = 0.0;
var all=new Array();
for(var i = 0; i < 49; i++)
all[i] = 0;
//....I OMMITTED CODE HERE FOR THE REST OF THE onkeyup FUNCTIONS
document.getElementById("s1").onkeyup = function() {
if(this.value != "") {
all[44] = (parseInt(this.value,10) * 6.50);
}
else {
all[44] = 0;
}
updateIt();
};
document.getElementById("s2").onkeyup = function() {
if(this.value != "") {
all[45] = (parseInt(this.value,10) * 6.50);
}
else {
all[45] = 0;
}
updateIt();
};
document.getElementById("s3").onkeyup = function() {
if(this.value != "") {
all[46] = (parseInt(this.value,10) * 6.50);
}
else {
all[46] = 0;
}
updateIt();
};
document.getElementById("s4").onkeyup = function() {
if(this.value != "") {
all[47] = (parseInt(this.value,10) * 6.50);
}
else {
all[47] = 0;
}
updateIt();
};
document.getElementById("s5").onkeyup = function() {
document.getElementById("mySpan").innerHTML = "WOAH";
if(this.value != "") {
all[48] = (parseInt(this.value,10) * 6.50);
}
else {
all[48] = 0;
}
updateIt();
};
function updateIt() {
var theTotal = 0;
for(var j = 0; j < 49; j++)
theTotal += all[j];
theTotal = all[48];
document.getElementById("mySpan").innerHTML = "$" + theTotal.toFixed(2);
}
</script>
Note that I have more tables and other onKeyUp functions declared, but for some reason all the tables after this table (I have about 6 tables, and the first 3 work properly), do not respond to their respective onkeyup events.
Here is code for the last table that worked (this code is right above the code creating the table I posted above):
<table cellspacing="0">
<caption id="title4">
Rubs (1.2 - 2.3oz.)
</caption>
<thead>
<tr>
<th> </th>
<td >Price</td>
<td >Quantity</td>
</tr>
</thead>
<tbody>
<tr class="statement4">
<th><label>Buffalo</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs1" name="rubs1" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Chipotle</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs2" name="rubs2" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Citrus</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs3" name="rubs3" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Creole</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs4" name="rubs4" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Crushed Peppercorn & Garlic</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs5" name="rubs5" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Greek</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs6" name="rubs6" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Jamaican Jerk</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs7" name="rubs7" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Lemon Pepper</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs8" name="rubs8" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Moroccan/label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs9" name="rubs9" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Smoky Barbecue</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs10" name="rubs10" class="field text small" type="text" value="0"/>
</td>
<tr class="statement4">
<th><label>Thai Red Curry</label></th>
<td title="Yes" >
<label>$4.25</label>
</td>
<td title="No" >
<input id="rubs11" name="rubs11" class="field text small" type="text" value="0"/>
</td>
</tr>
</tbody>
</table>

var theTotal = 0;
for(var j = 0; j < 49; j++)
theTotal += all[j];
theTotal = all[48];
Why are you doing this? First you calculate the sum of all prices, then you assign only the last value to theTotal. This seems wrong to me.

You are missing an element by id "mySpan" though you are looking for it in your JS(document.getElementById("mySpan").innerHTML ), hence it is erroring out.
Add a HTML element with that ID and it should work.
Check jsfiddle: http://jsfiddle.net/Chandu/yVaMx/5/

Categories