Calculate checkbox enabled rows and display in another table angular - javascript

I have a two tables totally Table1 and table2. Table1 is filled with data from a service. In Table1 I have columns such as Qty,Price and Checkbox. In the checkbox columns I have checkboxes as values. The qty and price have number as values
In table2 I have columns named Qty and Price
Pics of table 1 and 2
Now say if I click the checkbox in row 1,2,4 in table1. So if you take the Qty column in table1 all the Qty values in row 1,2,4 should be added and be shown in qty column in table2 as a single value. Same goes for price column. (Example 6,4,2 are the values of qty column in row 1,2,4 so add(6+4+2) and show total in first row of qty column in table2
I am trying to do this for two days couldn't find a solution.I know its a very difficult one.
Please help me if u can.
STACKBLITZ: https://stackblitz.com/edit/angular-ivy-coydaf?file=src%2Fapp%2Fapp.component.ts

Add a variable at component level which will hold the total count.
totalCount: any;
Initialize it in ngOnInit event.
this.totalCount = {qty:0,value:0};
on Checkbox onChange event invoke below function which will add/substract based on checked status.
getTotal(event,item) {
if (event.target.checked) {
this.totalCount.qty = this.totalCount.qty + item.qty;
this.totalCount.value = this.totalCount.value + item.value;
} else {
this.totalCount.qty = this.totalCount.qty - item.qty;
this.totalCount.value = this.totalCount.value - item.value;
}
}
Display the value like this.
<tr *ngIf="!(totalCount.qty == 0 || totalCount.value == 0)">
<td>1</td>
<td>{{totalCount.qty}}</td>
<td>{{totalCount.value}}</td>
</tr>
Working StackBlitz:-
https://stackblitz.com/edit/angular-ivy-349pwn?file=src%2Fapp%2Fapp.component.html

Related

ng-repeat table,how to add some input(text) for one of rows,like the picture:

this table is created by ng-repeat,I want to add a row input for a row,just one,not all rows
this is my html,how to add,thanks
To add input element to any one row and not all the rows, you could use the $index by checking the rowIndex value.
for ex:
ng-if = "$index == 2" or ng-show="$index==2"

jQuery - Select element by class inside current row

I am generating a table with values from a database, the total of each columns is displayed at the end of the table.
I want to give the user the option of removing rows they don't want and have the total change accordingly.
Since the form will be submitted I already have hidden input elements added. I want to be able to get the value of a column in the row being removed and subtract it from the total, then display the new total.
I thought the best way would be to give each column a class name and for the specific row get the value of the class, as it is being deleted.
This is my table structure
<tbody>';
for($i=0;$i<count($alto);$i++){
echo' <tr>
<td>'.$key[$i].'</td>
<td>'.$talk[0][$i].'<input type="hidden" class="bate" value="'.$talk[0][$i].'" name="0'.$key[$i].'"/></td>
<td>'.$talk[1][$i].'<input type="hidden" class="vito" value="'.$talk[1][$i].'" name="1'.$key[$i].'"/></td>
<td>'.$talk[2][$i].'<input type="hidden" class="hist" value="'.$talk[2][$i].'" name="2'.$key[$i].'"/></td>
<td><button class="delete" type="button">Delete</button><td>
</tr>';
}
echo '</tbody>
From my limited knowledge of jquery I think I would need something like this:
var exp = $(this).val('.vito');
Possibly I'm having traversing issues and I need to add a .parents() tag in there somewhere, but I'm not sure.
Create function calculate_total() that calculate the table total and call it after deleting row :
function calculate_total(){
var bate_total, vito_total, hist_total = 0;
$("table").find('tr').each(function(){
bate_total += parseInt( $(this).find('.bate').val() );
vito_total += parseInt( $(this).find('.vito').val() );
hist_total += parseInt( $(this).find('.hist').val() );
});
//Here you can assign the new totals to the columns that contain totals values
}
Hope this helps.

Multi-selected option for quantity that updates Total value

I have prepared the following jsfiddle that ilustrates the core of the issue
The problem is as follow:
I have a list with products in a shop basket. Each product has options available for example colors and when the customer select a quantity for white color for example the js function:
function update_amounts(){
var sum = 0.0;
$('#basketorder > tbody > .product').each(function() {
var qty = $(this).find('.qty option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price);
sum+= amount;
$(this).find('.amount').text(''+ amount);
//alert(sum);
});
must update the total amount for the products. Function works fine but it calculates only for the first selected color quantity, but if the customer decides to order another 2 black items it will not calculate them. My question is how to make this function to sum all quantities from different colors and multiply them with the product Single price so I get a correct Total?
Thank you for your help in advance

find the value of the div then PLUS that numeric value to another div

I have 2 div's.
One is SHIPPING and another is TOTAL PRICE.
<div id="tt_shipping_rate_basket">$0.00</div> = SHIPPING
<div class="op_col5_3" align="right" id="tt_total_basket">$897.00</div> = TOTAL PRICE
Also there are 4 inputs for SHIPPING, each adds it's own price in the shipping div..
for example:
input 1 = 10$
input 2 = 20$
so when choosing an input the value in the #tt_shipping_rate_basket is changing ajax to the value of the input... this works great...
The problem is, I do not want 2 divs (one for shipping and one for total price)...
I just want ONE div, called Total Price, and when I choose an input, the value should ADD&CHANGE to the #tt_total_basket instead of tt_shipping_rate_basket...
What I'm trying to do is, GET the value of SHIPPING field (which is ajax populated), GET the value of TOTAL PRICE field, then just ADD shipping to Total Price...
here is what I tried to write but it doesn't seem to work, sorry I'm not to good at programming..
function plus() {
var spTotal = document.getElementById("tt_total_basket");
var spShip = document.getElementById("tt_shipping_rate_basket");
spTotal = spTotal.innerHTML = +spShip;
}
spTotal is the TOTAL PRICE
spShip is the Shipping Price
The result should be (spTotal = spTotal.value + spShip.value)..
Can somebody please help?
Untested, but you get the idea:
var spTotal = document.getElementById("tt_total_basket").innerHTML.replace('$', '');
var spShip = document.getElementById("tt_shipping_rate_basket").innerHTML.replace('$', '');
spTotal = parseFloat(spTotal) + parseFloat(spShip);

calculate values

In an order form, each row has 3 fields: quantity, price, total.
How do I create a function that on changing a number the subtotal is calculated and so is the total?
Can anyone suggest a way?
You'd need to add a listener to each row so that when the price or quantity are updated, you can get the new quantity and price and update the total column.
In jQuery, something like:
$('.row').on('change', function() {
var quantity = $('.quantity', this).val(), // get the new quatity
price = $('.price', this).val(), // get the new price
total = price*quantity;
$('.total', this).val(total); //set the row total
var totals = $.map($('.row .total'), function(tot) {
return tot.val(); // get each row total into an array
}).reduce(function(p,c){return p+c},0); // sum them
$('#total').val(totals); // set the complete total
});
This assumes that each order form row container has the class row, each quantity has the class quantity, each row total has the class total and the order form total has the id total.

Categories