Actually how to automatically calculate subtotal depending the js spinner change, also sum them into grand total with jquery, I am newly to the jquery with operation function so any suggestion will be appreciated
Thanks
Warmly
Fiddle >>
<div class="table-responsive" id="bottom-table">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Part Number</th>
<th>Desc</th>
<th>Qty / Unit</th>
<th>Qty Needed</th>
<th>Het ( Rp )</th>
<th>Estimation Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3DCam01</td>
<td>3D Camera</td>
<td>1</td>
<td><input class="spinner" value="1" readonly="readonly"></td>
<td>$1500.00</td>
<td><p class="subtotal"></p>Subtotal</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>USB02</td>
<td>External Hard Drive</td>
<td>1</td>
<td><input class="spinner" value="1" readonly="readonly"></td>
<td>$800.00</td>
<td>Subtotal</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>wristWear03</td>
<td>Wrist Watch</td>
<td>1</td>
<td><input class="spinner" value="1" readonly="readonly"></td>
<td>$300.00</td>
<td>Subtotal</td>
<td>Delete</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total</td>
<td>Total Amount</td>
<td>Delete</td>
</tr>
</tbody>
</table>
</div>
Thanks
Warmly
you need to bind to the spin event to get the value entered then update the DOM accordingly
function quantity(price, multiplier) {
if (multiplier === 1) {
return '$' + price.toFixed(2);
}
return '$' + (price * multiplier).toFixed(2);
}
$( ".spinner" ).spinner({
min: 1,
spin: function (event, ui) {
var value = ui.value;
var $target = $(event.target);
var $priceCell = $target.parents('td').next('td');
var $subtotalCell = $priceCell.next('td');
$subtotalCell.text(quantity($priceCell.data('price'), value));
}
});
fiddle - http://jsfiddle.net/m6csdx51/1/
notice the addition of data-price to the price cells
Related
I have a table like so
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
I have a jquery array where there some ids stored of those rows example
id= [123,431,213]
what I want is when my page loads the ids which are inside the array to be already checked
$(document).ready(function () {
//code
});
I do not know how to go about this any help would be helpful
Iterate over each row in the table body and for each take the text value of the first cell and check to see if your array includes it.
const arr = [ 431, 123, 888 ];
// Iterate over the rows
$('tbody tr').each((i, el) => {
// Grab the first cell's text and coerce it to a number
const number = Number($(el).find('td').first().text());
// If the value is in the array
if (arr.includes(number)) {
// Find the input and check it
$(el).find('input[type="checkbox"]').prop('checked', 'checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>124</td>
<td>Bob</td>
<td>23</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
var ids = ['431', '132'];
$( document ).ready(function() {
$('td.id').each(function( index ) {
if (ids.includes($(this).text())){
$( "input.checkboxes" ).eq( index ).prop( "checked", true );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td class="id">123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
There is a table that is sorted by clicking from larger to smaller values. How to make sure that the ordinal number of the value is always between 1 and 5 after sorting the table?
That is, the numerical order should always be between 1 and 5 and should not be sorted.
$(document).ready(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
Never heard of - and therefore never used - stupidtable but it doesn't look like there is a call-back event once the sorting has completed.
So instead, I've used a timeout as part of the click event.
The within the timeout finds all the first-child <td> elements, and uses the index of each to set the text of the element.
As the stupidsort code does the sort 10-milliseconds after the client event, I've had to make it 20 in the code for it to work...
$(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
// After a short period, set the values
setTimeout(function() {
$table.find("tbody tr td:first-child").each(function(i, v) {
$(this).text((i + 1).toString());
});
}, 20);
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
I have a table here that I am trying to hide table row if the patient ID = patient ID. The table is loaded dynamically with XML. I will provide an example here.
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>1</td>
<td>Christian</td>
<td>Checkup</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Blood Test</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
So the rows where id = 1 and where id = 3 both have multiple rows. I want to only display one row and hide the other 3 unless i double click the row then it will display the 2,3,4,5 rows etc.
so this will be the end result:
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
and when you double click the row it will switch the css to display the hidden rows.
Use JavaScript to iterate over all rows in the table. If any have the
same ID as a previous row then set the style to display: 'none'.
Add an event listener to each row that listens for double clicks. On a double click check the row's next sibling. If it has the same ID as the current row then set its style to display:'table-cell'.
var ids = [],
rows = document.querySelectorAll( '.table tr' )
Array.from( rows ).forEach( row => {
var rowID = row.querySelector( 'td:first-child' ).innerHTML
if ( !ids.includes( rowID ) )
ids.push( rowID )
else
row.style.display = 'none'
row.addEventListener( 'dblclick', () => {
var next = row.nextElementSibling,
nextID = ( next ? next.querySelector( 'td:first-child' ).innerHTML : null )
if ( nextID = rowID )
next.style.display = 'table-row'
} );
} )
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>1</td>
<td>Christian</td>
<td>Checkup</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Blood Test</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
I have a table like below :
<table>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
<tr>
<td>1</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
</table>
Grand Total = <input id="grand_total">
I am trying to display the Total Price of each row using jquery keyup function.
and also want to display the grand total price of the each row.
the formula of finding the Total Price is given below :
discount_value = Price*(discount_percent/100)
discount_price = Price-discount_value
total_price = discount_price * quantity
How can I do this please help
i am trying simply just summing all value like this :
<script type="text/javascript">
$(document).ready(function(){
$(".expensess").each(function() {
$(document).on('keyup', '.expensess', function() {
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expensess").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expensess_sum").val(sum.toFixed(2));
}
</script>
But m confused how to implement the above formula for calculate the total price.
$('input.qty,input.price,input.discount').on('change keyup',function(){
var $tr = $(this).closest('tr'),
$qty = $tr.find('input.qty') ,
$price= $tr.find('input.price'),
$discount= $tr.find('input.discount'),
$total= $tr.find('input.expensess_sum'),
$grand_total=$('#grand_total');
$total.val($qty.val()*($price.val()-($price.val()*($discount.val()/100))));
var grandTotal=0;
$('table').find('input.expensess_sum').each(function(){
if(!isNaN($(this).val()))
{grandTotal += parseInt($(this).val());
}
});
if(isNaN(grandTotal))
grandTotal =0;
$grand_total.val(grandTotal)
})
input{
width:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody><tr>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
</tr>
<tr>
<td>1</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
</tbody></table>
Grand Total = <input id="grand_total" disabled="">
</body>
Did it by using simple java script Code!
var sumExpenses = 0;
var tdBudget = document.getElementById('tableBudget').getElementsByTagName('td');
for (var i = 0; i < tdBudget.length; i++) {
if (tdBudget[i].className == "spanexpense") {
sumExpenses += isNaN(tdBudget[i].innerHTML) ? 0 : parseInt(tdBudget[i].innerHTML);
}
}
document.getElementById('sumExpenses').innerHTML = sumExpenses;
<table class="table table-bordered">
<thead>
<tr>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
</tr>
</thead>
<tbody id="tableBudget">
<tr>
<td class="spanexpense">
12
</td>
<td class="spanexpense">
23
</td>
<td class="spanexpense">
23
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td id="sumExpenses"></td>
</tr>
</tfoot>
</table>
Fiddle https://jsfiddle.net/ey2gLp7t/
I have a table in which I have some columns:
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
</tbody>
</table>
If a user adds some value in the "Price" column then I multiply "Quantity" and "Price" and show the result in the third column "Total" in the same row. It will have to run time. Please give me a solution in javascript or jQuery.
You can do it like this :
$("#TableID1").find("input").change(function(){
var getVal = $(this).parent().index();
var multiply = Number($(this).parent().parent().find("td").eq(getVal-1).text()) * $(this).val();
$(this).parent().parent().find("td").eq(getVal+1).find("input").val(multiply)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>
Hope it helps :)
Attach input event handler and update the input based on the value.
$(document).ready(function() {
$('tr td:nth-child(5) input').on('input', function() {
// get input in last column and set value
$(this).closest('tr').find('td:nth-child(6) input').val(
// get value from input, and use `+` to convert string to number
+$(this).val() *
// get quantity value and multiply
+$(this).closest('tr').find('td:nth-child(4)').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>