grab each tr value and make a object with td values - javascript

Please check the code bellow. On #btnConfirm button click i have to grab each class="invTr" data-productid="1" then inside each of those tr i have to grab two td text which is- Quantity and Price Per Unit then make a store whole object in var Items = {}. In jquery code comments you will get a sample of object output i wanted to be. Anyone can make output like this from my current tr? The code i already have tried is like jquery bellow but i am stuck on here with error says push of undefined. Any idea to make output like this? Also anyone if can provide JSON object output that also great. Thanks in advance
Currently error i am getting is:
Cannot read property 'push' of undefined
Here is my js fiddle for quick try
HTML:
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Quantity</th>
<th scope="col">Price Per Unit</th>
<th scope="col">Total Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
<tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
</tbody>
</table>
<button id="btnConfirm">Confirm</button>
Jquery:
//confirm button on click actions
$('#btnConfirm').on('click', function () {
var Items = {};
var invTrClassesObj = {};
var _invTrClasses = $('.invTr');
$.each(_invTrClasses, function (i, invTrClasse) {
invTrClassesObj.ProductId.push(invTrClasse.attr('data-productId'));
});
//console.log(Items); //I want output object like this-> { ProductId:1 { Price:10.00, Quantiry:1 }, ProductId:2 { Price:20.00, Quantiry:3 } }
});

invTrClassesObj.ProductId gives 'push' of undefined becasuse of invTrClassesObj.ProductId is not set yet.
I have added code to get your required JSON object output.
//confirm button on click actions
$('#btnConfirm').on('click', function () {
var x = document.querySelectorAll(".invTr");
//console.log(x);
var Items = {};
var invTrClassesObj = [];
var _invTrClasses = $('.invTr');
$.each(_invTrClasses, function (i, invTrClasse) {
invTrClassesObj.push(
{
'ProductId':invTrClasse.getAttribute('data-productId'),
'Price': $(this).find("td").eq(2).html(),
'Quantiry':$(this).closest('tr').find(".qty").val()
});
});
console.log(invTrClassesObj);
//console.log(Items); //I want output object like this-> { ProductId:1 { Price:10.00, Quantiry:1 }, ProductId:2 { Price:20.00, Quantiry:3 } }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Quantity</th>
<th scope="col">Price Per Unit</th>
<th scope="col">Total Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
<tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
</tbody>
</table>
<button id="btnConfirm">Confirm</button>

Related

How to sum all the input values of more than one cells in the last cell of table in Angular?

So I need to calculate the sum of input values for each input cell and show it dynamically to the last cell of the row. Refer following image
In the above image the number of products can vary so rows generated are not fixed
Now as shown in the image I need to update the value of final amount for each row dynamically using input available for each row's cells
I am attaching HTML code for the table:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Product Category</th>
<th scope="col">Sub Category</th>
<th scope="col">Master Category</th>
<th scope="col">Product Weight</th>
<th scope="col">Labour</th>
<th scope="col">Price</th>
<th scope="col">SGST (In %)</th>
<th scope="col">CGST (In %)</th>
<th scope="col">Discount</th>
<th scope="col">Final Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of _selectedProductsData;index as i">
<th scope="row">{{i+1}}</th>
<td>{{item.productCategory}}</td>
<td>{{item.subCategory}}</td>
<td>{{item.masterCategory}}</td>
<td>{{item.productWeight}} gms</td>
<td>
<input class="form-control labourInput" type="number" id="{{item.productGuid}}-labour"
placeholder="Enter Labour">
</td>
<td>
<input class="form-control priceInput" type="number" id="{{item.productGuid}}-price"
placeholder="Enter Price">
</td>
<td>
<input class="form-control sgstInput" type="number" id="{{item.productGuid}}-SGST"
placeholder="Enter SGST">
</td>
<td>
<input class="form-control cgstInput" type="number" id="{{item.productGuid}}-CGST"
placeholder="Enter CGST">
</td>
<td>
<input class="form-control discountInput" type="number"
id="{{item.productGuid}}-discount" placeholder="Enter Discount">
</td>
<td>
{{calculateTotalAmountOfEachProduct(item.productGuid)}}
</td>
</tr>
</tbody>
</table>
each row (product) has its own productGuid
I've created method calculateTotalAmountOfEachProduct(productGuid:string) but it does not change the value it always shows 0 even when input value is changed
Following is the code for the same:
calculateTotalAmountOfEachProduct(productGuid:string):number {
let labourInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-labour`)).value)
let priceInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-price`)).value)
let sgstInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-SGST`)).value)
let cgstInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-CGST`)).value)
let discountInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-discount`)).value)
return labourInput+priceInput+sgstInput+cgstInput+discountInput
}
I am not sure how to achieve this in angular.
There are multiple ways of achieving what you are asking, you could do it using local references on each input, and then listening for the input event for changes in the values like the following:
This is just an example:
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Labour</th>
<th scope="col">Price</th>
<th scope="col">SGST (In %)</th>
<th scope="col">CGST (In %)</th>
<th scope="col">Discount</th>
<th scope="col">Final Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data; let i = index">
<th>{{ i + 1 }}</th>
<th><input type="number" (input)="d.labor = getValue($event)" #labor [value]="d.labor" /></th>
<th><input type="number" (input)="d.price = getValue($event)" #price [value]="d.price" /></th>
<th><input type="number" (input)="d.sgst = getValue($event)" #sgst [value]="d.sgst" /></th>
<th><input type="number" (input)="d.cgst = getValue($event)" #cgst [value]="d.cgst" /></th>
<th><input type="number" (input)="d.discount = getValue($event)" #discount [value]="d.discount" /></th>
<th>
<!-->the plus sign is for casting from string to number<-->
<label
>{{ +labor.value + +price.value + +sgst.value + +cgst.value + +discount.value }}
</label>
</th>
</tr>
</tbody>
</table>
component
#Component({...})
export class DemoComponent {
data = [...] // some data
getValue(event: Event): number {
return Number((event.target as HTMLInputElement).value);
}
}
Here's the demo

Javascript updating field

I am facing an issue where I need a value to be updated as I enter values into input fields.
There is also a variable pulled from a DB in laravel framework.
I have a field which takes the total amount due and applies the eftpos surcharge to the amount as a reference for how much is required to be paid via eftpos.
I would like to update this field based on the new balance is Cash/Cheque or Scholarship amounts are added (as this are not subject to the eftpos surcharge). The idea is to ensure we are correctly applying the EFTPOS Surcharge to the eftpos amount.
HTML Code
<table class="table">
<thead class="text-primary">
<th class="text-center">Method</th>
<th class="text-center">Amount</th>
<th></th>
</thead>
<tbody>
<tr>
<td class="text-center">EFTPOS</td>
<td class="text-center">$ <input type="number" step="0.01" name="eftpos"></td>
<td class="text-center"><a id="eftpos"> ${{ number_format(($income + $student->AdditionalItems->where('paid', 0)->sum('amount'))*(1+$eftpos), 2)}}</a> - Including Surcharge</td>
</tr>
<tr>
<td class="text-center">Cash</td>
<td class="text-center" id="cash">$ <input type="number" step="0.01" name="cash"></td>
<td></td>
</tr>
<tr>
<td class="text-center">Cheque</td>
<td class="text-center" id="cheque">$ <input type="number" step="0.01" name="cheque"></td>
<td></td>
</tr>
<tr>
<td class="text-center">Scholarship</td>
<td class="text-center" id="scholarship">$ <input type="number" step="0.01" name="scholarship"></td>
<td></td>
</tr>
</tbody>
</table>
Javascript Code
<script type="text/javascript">
window.onload = function () {
var cash = document.getElementById('cash');
cheque = document.getElementById('cheque');
scholarship = document.getElementById('scholarship');
total = document.getElementById('total');
eftpos = 1 + {!! json_encode($eftpos, JSON_HEX_TAG) !!};
trigFunc = function(){
eftpos.value = (total.value - (cash.value + cheque.value + scholarship.value))*eftpos.value;
document.getElementById('eftpos').innerHTML = eftpos.value;
console.log(eftpos.value);
}
cash.onchange = trigFunc;
cheque.onchage = trigFunc;
scholarship.onchange = trigFunc;
}
The $eftpos is the passed by the laravel controller
Thanks in advance for your help

Apply function in dynamically added each row differently with jQuery

I have added new rows dynamically with jQuery and applied a function but I want to apply this differently for each row. right now its applying commonly for every rows.
HTML code:
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text"></td>
<td>
<select class="form-control" id="bank_ac_no">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Jquery Codes:
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text"></td><td><select class="form-control" id="bank_ac_no"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
if ($(this).val() == 'Vault'){
$('#bank_title, #bank_ac_no').hide();
}
else if ($(this).val() == 'Bank'){
$("tr.bank_deposit").each(function (){
$('#bank_title, #bank_ac_no').show();
});
}
});
When I am changing the deposit method I want to hide/show the two fields in each row but its applying in every row.
see the demo with codes:
https://jsfiddle.net/wasid/33qp9ewn/3/
You can add an attribute (like row-id) for inputs to determine which row has been processed. I modified HTML and Javascript codes. Also, you can take a look modifed codes as Fiddle Demo
HTML
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method" row-id="0">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text" row-id="0"></td>
<td>
<select class="form-control" id="bank_ac_no" row-id="0">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Javascript;
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method" row-id="'+i+'"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text" row-id="'+i+'"></td><td><select class="form-control" id="bank_ac_no" row-id="'+i+'"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="'+i+'"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
var rowId = $(this).attr("row-id");
if ($(this).val() == 'Vault'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").hide();
}
else if ($(this).val() == 'Bank'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").show();
}
});

Do SUM of Dynamic row added by innerHTML method through javascript

I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!

How to get the id of first <tr> of <tbody> in HTML table using jQuery?

I've following HTML table:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr id="jumbo">
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Now I want to get the id of first row from . The id in this case is reb1_1. For getting it I tried below code but it didn't work.
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table tbody:tr:first').attr('id');
alert(row);
});
});
Thank you.
first go to table tbody then find tr then filter first row like below
var row = $(this).closest('table').find(' tbody tr:first').attr('id');
or can try
var row = $(this).closest('table').find(' tbody tr:eq(0)').attr('id');
reference :first and :eq
Make changes as shown in demo :-
http://jsfiddle.net/avmCX/38/
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table').find('tbody tr:first').attr('id');
alert(row);
});
});
For more info have a look here :-
http://api.jquery.com/first/
change your function to this:
$(document).ready(function() {
$('.products').click(function () {
var id = $(this).closest("table").find("tbody>tr").first().attr("id");
alert(id);
});
});
this will show you the id.

Categories