How to display the dynamic table data to another table using javascript - javascript

Iam trying to display multiple products to upload at once by using add product button, it displays the entire table to enter the product details. Here Iam facing the issue with add column option.
When I click on add grade option, columns are added successfully for one product, but if it comes for multiple products it will added to every table. So this is the 1st issue.
And secondly whatever the codes are entered in dynamic table were affected to packing list table.
Here is the code which I have tried.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
<style type="text/css">
input[type=text] {
width: 150px;
}
.form-group{
padding-bottom: 30px;
}
</style>
<style type="text/css">
.table-content {
padding: 20px;
}
.remove {
margin-left: 10px;
color: red;
}
.remove:hover {
cursor: pointer;
}
.form-control {
width: 90px;
}
</style>
<script>
$(document).ready(function(){
var max=2;
var x = 1;
$("#add_product").click(function(){
var html = '<div class="table-content"><div style="padding-bottom: 20px;"><button type="button" class="btn btn-primary add-row" style="margin-right: 10px;">Add Codes</button><button type="button" class="btn btn-info add-col">Add Grades</button></div><table class="table table-bordered table-hover table-sortable"><thead><tr><tr><th></th><th colspan="3" class="text-center">CODES</th><th class="text-center">GRADES</th></tr><tr><th>Delete code</th><th class="text-center">CODES</th><th class="text-center">PRODUCTION</th><th class="text-center">REGN NO</th><th class="text-center"><select name="grade1" id="grade1" class="form-control"><option value="0">Select</option><option value="13/15">13/15</option><option value="16/20">16/20</option><option value="21/25">21/25</option><option value="26/30">26/30</option><option value="31/40">31/40</option><option value="41/50">41/50</option><option value="51/60">51/60</option><option value="61/70">61/70</option><option value="71/90">71/90</option><option value="91/110">91/110</option></select></th><th id="total">TOTAL</th></tr></tr></thead><tbody><tr><td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></i></span></td><td><input type="text" name="codes[]" placeholder="CODES" class="form-control"/></td><td><input type="text" name="production[]" placeholder="production" class="form-control"/></td><td><input type="text" name="reg_no[]" placeholder="reg_no" class="form-control"/></td><td><input type="number" name="quantity1[]" class="form-control"/></td><td id="total1"><input type="number" placeholder="total" name="total[]" class="form-control"/></td></tr></tbody></table></div>';
if(x <= max){
$("#products").append(html);
x++;
}
});
$("#table_field").on('click','#remove',function(){
$(this).closest('tr').remove();
/*x--;*/
});
});
</script>
</head>
<body>
<div class="container">
<center>
<h1 style="padding-bottom: 50px;">CODE LIST</h1>
</center>
<form>
<div class="form-group">
<label class="control-label col-sm-2">Consignee</label>
<div class="col-sm-10">
<input type="text" name= "consignee" class="form-control" placeholder="Enter Consignee">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Exported TO</label>
<div class="col-sm-10">
<input type="text" name="exportedto" class="form-control" placeholder="Enter Exported TO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">PO</label>
<div class="col-sm-10">
<input type="text" name="po" class="form-control" placeholder="PO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Brand</label>
<div class="col-sm-10">
<input type="text" name="brand" class="form-control" placeholder="Enter Brand">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">INV NO</label>
<div class="col-sm-10">
<input type="text" name="invno" class="form-control" id="invno" placeholder="Enter INV NO">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product">PRODUCT</label>
<div class="col-sm-10">
<input type="text" name="product" class="form-control" id="product" placeholder="Enter Product">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="packing">Type of Packing</label>
<div class="col-sm-10">
<input type="text" name="packing" class="form-control" id="packing" placeholder="Type of Packing">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button id="add_product" type="button" class="btn btn-warning">Add Product</button>
</div>
</div>
<div id="products">
<div class="table-content">
<div style="padding-bottom: 20px;">
<button type="button" class="btn btn-primary add-row" style="margin-right: 10px;">Add Codes</button>
<button type="button" class="btn btn-info add-col">Add Grades</button>
</div>
<table class="table table-bordered table-hover table-sortable">
<thead>
<tr>
<tr><th></th><th colspan="3" class="text-center">CODES</th><th class="text-center">GRADES</th></tr>
<tr>
<th>Delete code</th>
<th class="text-center">
CODES
</th>
<th class="text-center">
PRODUCTION
</th>
<th class="text-center">
REGN NO
</th>
<th class="text-center">
<select name="grade1" id="grade1" class="form-control">
<option value="0">Select</option>
<option value="13/15">13/15</option>
<option value="16/20">16/20</option>
<option value="21/25">21/25</option>
<option value="26/30">26/30</option>
<option value="31/40">31/40</option>
<option value="41/50">41/50</option>
<option value="51/60">51/60</option>
<option value="61/70">61/70</option>
<option value="71/90">71/90</option>
<option value="91/110">91/110</option>
</select>
</th>
<th id="total">TOTAL</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></i></span></td>
<td>
<input type="text" name='codes[]' placeholder='CODES' class="form-control"/>
</td>
<td>
<input type="text" name='production[]' placeholder='production' class="form-control"/>
</td>
<td>
<input type="text" name='reg_no[]' placeholder='reg_no' class="form-control"/>
</td>
<td>
<input type="number" name="quantity1[]" class="form-control"/>
</td>
<td id="total1">
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
</tr>
</tbody>
</table>
</div>
<div id="packing-list">
<h4 style="color: red">Packing List</h4>
<table class="table table-bordered table-hover table-sortable" id="packing-list">
<thead>
<tr>
<tr>
<th>S.No</th>
<th class="text-center">
DAY CODE
</th>
<th class="text-center">
SOURCE CODE
</th>
<th class="text-center">
HON QTY IN Kgs
</th>
<th class="text-center">
USED QTY IN Kgs
</th>
<th class="text-center">AFTER HEAD LESS IN Kgs</th>
<th class="text-center">
PEELING IN Kgs
</th>
<th class="text-center">
SOAK OUT IN Kgs
</th>
<th class="text-center">
FINISH PRODUCT IN Kgs
</th>
<th class="text-center">
FINISH PRODUCT IN M/c
</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name='codes[]' placeholder='CODES' class="form-control"/>
</td>
<td>
<input type="text" name='production[]' placeholder='production' class="form-control"/>
</td>
<td>
<input type="text" name='reg_no[]' placeholder='reg_no' class="form-control"/>
</td>
<td>
<input type="number" name="quantity1[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
<td>
<input type="number" placeholder="total" name="total[]" class="form-control"/>
</td>
</tr>
<tr>
<th colspan="4" class="text-center">TOTAL</th>
<th>Total 1</th>
<th>Total 2</th>
<th>Total 3</th>
<th>Total 4</th>
<th>Total 5</th>
<th>Total 6</th>
</tr>
<tr>
<th colspan="5" class="text-center">YEILD %</th>
<th>%</th>
<th>%</th>
<th>%</th>
<th>%</th>
<th>%</th>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
<!-- <center>
<input type="submit" class="btn btn-success" name="codelist" id="save" value="submit">
</center> -->
</body>
<script type="text/javascript">
// we're binding a lot of different click event-handlers to this element
// there's no point looking it up every time we do so:
var body = $('body');
// binding the click event for the add-row button:
body.on('click', 'button.add-row', function() {
// getting the relevant <table>:
var table = $(this).closest('div.table-content'),
// and the <tbody> and <thead> elements:
tbody = table.find('tbody'),
thead = table.find('thead');
// if the <tbody> has children:
if (tbody.children().length > 0) {
// we find the last <tr> child element, clone it, and append
// it to the <tbody>:
tbody.find('tr:last-child').clone().appendTo(tbody);
} else {
// otherwise, we create the basic/minimum <tr> element:
var trBasic = $('<tr />', {
'html': '<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></span></td><td><input type="text" class="form-control" /></td>'
}),
// we find the number of columns that should exist, by
// looking at the last <tr> element of the <thead>,
// and finding out how many children (<th>) elements it has:
columns = thead.find('tr:last-child').children().length;
// a for loop to iterate over the difference between the number
// of children in the created trBasic element and the current
// number of child elements of the last <tr> of the <thead>:
for (var i = 0, stopWhen = columns - trBasic.children.length; i < stopWhen; i++) {
// creating a <td> element:
$('<td />', {
// setting its text:
'text': 'static element'
// appending that created <td> to the trBasic:
}).appendTo(trBasic);
}
// appending the trBasic to the <tbody>:
tbody.append(trBasic);
}
var table = $(this).closest('div.packing-list'),
// and the <tbody> and <thead> elements:
tbody = table.find('tbody'),
thead = table.find('thead');
// if the <tbody> has children:
if (tbody.children().length > 0) {
// we find the last <tr> child element, clone it, and append
// it to the <tbody>:
tbody.find('tr:last-child').clone().appendTo(tbody);
} else {
// otherwise, we create the basic/minimum <tr> element:
var trBasic = $('<tr />', {
'html': '<td><span class="remove remove-row"><i class="glyphicon glyphicon-trash"></span></td><td><input type="text" class="form-control" /></td>'
}),
// we find the number of columns that should exist, by
// looking at the last <tr> element of the <thead>,
// and finding out how many children (<th>) elements it has:
columns = thead.find('tr:last-child').children().length;
// a for loop to iterate over the difference between the number
// of children in the created trBasic element and the current
// number of child elements of the last <tr> of the <thead>:
for (var i = 0, stopWhen = columns - trBasic.children.length; i < stopWhen; i++) {
// creating a <td> element:
$('<td />', {
// setting its text:
'text': 'static element'
// appending that created <td> to the trBasic:
}).appendTo(trBasic);
}
// appending the trBasic to the <tbody>:
tbody.append(trBasic);
}
});
body.on('click', 'span.remove-row', function() {
$(this).closest('tr').remove();
});
body.on('click', 'span.remove-col', function() {
// getting the closest <th> ancestor:
var cell = $(this).closest('th'),
// getting its index with jQuery's index(), though
// cell.prop('cellIndex') would also work just as well,
// and adding 1 (JavaScript is zero-based, CSS is one-based):
index = cell.index() + 1;
// finding the closest <table> ancester of the <th> containing the
// clicked <span>:
cell.closest('table')
// finding all <td> and <th> elements:
.find('th, td')
// filtering that collection, keeping only those that match
// the same CSS-based, using :nth-child(), index as the <th>
// containing the clicked <span>:
.filter(':nth-child(' + index + ')')
// removing those cells:
.remove();
});
body.on('click', 'button.add-col', function() {
// finding the table (because we're using it to find both
// the <thead> and <tbody>:
var table = $(this).closest('div.table-content').find('table'),
thead = table.find('thead'),
// finding the last <tr> of the <thead>:
lastTheadRow = thead.find('tr:last-child'),
tbody = table.find('tbody');
att = table.find('#total');
// creating a new <th>, setting its innerHTML to the string:
$('<th>', {
'html': '<select name="grade1" id="grade1" class="form-control pull-left"><option value="0">Select</option><option value="13/15">13/15</option><option value="16/20">16/20</option><option value="21/25">21/25</option><option value="26/30">26/30</option><option value="31/40">31/40</option><option value="41/50">41/50</option><option value="51/60">51/60</option><option value="61/70">61/70</option><option value="71/90">71/90</option><option value="91/110">91/110</option></select><span class="pull-left remove remove-col"><i class="glyphicon glyphicon-trash"></span>'
// appending that created <th> to the last <tr> of the <thead>:
}).insertBefore(att);
// creating a <td>:
$('<td>', {
// setting its text:
'html': '<input type="number" name="quantity1[]" class="form-control"/>'
// inserting the created <td> after every <td> element
// that is a :last-child of its parent:
}).insertBefore('td:last-child');
});
</script>
</html>

Related

How to add pagination to the rows of a table

Let's say I have a table with some rows. I would like to have a page for each row.
Every time I select a row and press the Show selected button, the row is appended to the table, if I select 40 rows, 40 rows will be appended to the table, but what I want is that 40 pages are created and each page has one table with only one row.
JSFiddle Demo
Current result:
Desired result:
I am confused, how can I assign a href ="#" to a row in a table?
If I am not mistaken I have to do something like this (Bootsrap 4.0 documentation):
One way would be when you append rows inside your table show only first tr and hide others and when user click on any page number you can show that row and hide other .
Demo Code :
$(function() {
$("button#show-selected ,button#select-all").click(function() {
show_All();
});
function show_All() {
var html = "";
var html1 = "";
var buttons = "<button type='button' class='btn prev'> Prev </button>"
$("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) {
var selector = $(this).closest("tr") //get closest tr
//generate htmls
html1 += `<tr>
<td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td>
</tr>`
html += `<tr>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(4)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(5)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(6)").text().trim()}" readonly/></td>
<td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(7)").text().trim()}" readonly/></td>
</tr>`
buttons += `<button type="button" data-id="${index}" class="btn indexs">${index + 1 }</button>`
});
buttons += `<button type="button" class="btn next">Next</button>`
$("#secondTable1").html(html1)
$("#secondTable2").html(html)
$("#pagination").html(buttons)
$("#pagination button:eq(1)").addClass("btn-primary")
$("#secondTable1 tr , #secondTable2 tr").hide() //hide trs
$("#secondTable1 tr:eq(0) , #secondTable2 tr:eq(0)").show() //show only first one
}
});
//this code will get called when number(1,2,.) is clicked not for next/prev btn you need to write logic for next/prev button .
$("#pagination").on("click", ".indexs", function() {
$(this).addClass("btn-primary").siblings().removeClass("btn-primary") //add class
var data_id = $(this).data("id") //get index
$("#secondTable1 tr , #secondTable2 tr").hide() //hide all tr
$("#secondTable1 tr:eq(" + data_id + ") , #secondTable2 tr:eq(" + data_id + ")").show() //show tr where index matches..
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<div class="container">
<div class="row" id="searchVariantTable">
<div class="col">
<table class="table table-hover mt-5">
<thead class="variants-table-thead">
<tr>
<th class="active">
<input type="checkbox" class="select-all checkbox" name="select-all" />
</th>
<th>Gene</th>
<th>Variant</th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<!--The <tr> are populated dynamically after form submit, I just added some dummy values.
BACKEND: (Python-Django) -->
<tbody class="variants-table-tbody">
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene1</td>
<td class="warning">Variant1</td>
<td style="display: none;"> #1 value1</td>
<td style="display: none;"> #2 value1</td>
<td style="display: none;"> #3 value1</td>
<td style="display: none;"> #4 value1</td>
<td style="display: none;"> #5 value1</td>
</tr>
<tr>
<td class="active">
<input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
</td>
<td class="success">Gene2</td>
<td class="warning">Variant2</td>
<td style="display: none;"> #1 value2</td>
<td style="display: none;"> #2 value2</td>
<td style="display: none;"> #3 value2</td>
<td style="display: none;"> #4 value2</td>
<td style="display: none;"> #5 value2</td>
</tr>
</tbody>
</table>
<button id="select-all" class="btn btn-primary">Select all</button>
<button id="show-selected" class="btn btn-primary">Show selected</button>
</div>
</div>
<div class="row">
<div class="col-6">
<table class="table mt-5">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Gene</th>
<th style="text-align:center;">Variant</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable1">
<!--data will come here -->
</tbody>
</table>
</div>
<div class="col-6">
<div style="text-align: center;">
<h5>Genomic coordinate</h5>
</div>
<table class="table mt-4">
<thead class="variants-table-thead">
<tr>
<th style="text-align:center;">Opt #1</th>
<th style="text-align:center;">Opt #2</th>
<th style="text-align:center;">Opt #3</th>
<th style="text-align:center;">Opt #4</th>
<th style="text-align:center;">Opt #5</th>
</tr>
</thead>
<tbody class="variants-table-tbody" id="secondTable2">
<!--data will come here -->
</tbody>
</table>
</div>
</div>
</div>
<div id="pagination"></div>

Select elements within target div (row) on event jQuery

I have a table from which I need to select all of the values of the row after an event done in the same row (in this case is a keyup event) with jQuery. The table could have many rows but the selection has to be on the items of the row event.
This is the HTML of the table:
<table class="table" id="form-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
<th scope="col">Amount</th>
<th scope="col">Hidden</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<th scope="row">1</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" id="companySelect">
{% for product in product_options %}
<option>{{ product }}</option>
{% endfor %}
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control" id="qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control" id="price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" id="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
</tbody>
</table>
And looks like this on the site:
For more context: I am making a quote app in which I'll type the price and quantity of each item in each row and I need to update the "amount" column after each keyup. So I need to know how to select the proper "qty", "price", "discount" and "amount" id's of the row typed to do that.
Firstly, The id attribute is unique, So you should replace it with class like this
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
Secondly, You can get the tr by using .closest() like this $(this).closest("tr")
Finally, You can calculate individual row by creating another method named updateAmount_per_row like below:
function updateAmount_per_row(tr){
var qTy = getValue_by_className(tr, '.qty-column .qty');
var price = getValue_by_className(tr, '.price-column .price');
var amount = qTy * price;
tr.find('.amount-column').html(amount);
}
$(".qty-column, .price-column").on("keyup", function(){
var tr = $(this).closest("tr");
updateAmount_per_row(tr);
});
function updateAmount_per_row(tr){
var qTy = getValue_by_className(tr, '.qty-column .qty');
var price = getValue_by_className(tr, '.price-column .price');
var amount = qTy * price;
tr.find('.amount-column').html(amount);
}
function getValue_by_className(tr, className){
var value = parseInt(tr.find(className).val(), 10);
return value >= 0 ? value : 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="form-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
<th scope="col">Amount</th>
<th scope="col">Hidden</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<th scope="row">1</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" class="companySelect">
<option>Product A</option>
<option>Product B</option>
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
<tr id="row-2">
<th scope="row">2</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" class="companySelect">
<option>Product A</option>
<option>Product B</option>
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
</tbody>
</table>
Using Mai Phuong answer as testing I managed to make it work by using the target property instead of this, because this for some reason was referencing the whole document (#document).
Here is the keyup event listener:
$('.price, .qty, .discount').keyup((event) => {
let tr = event.target.closest('tr');
updateAmount(tr);
});
and here's the final updateAmount function:
function updateAmount(tr) {
let qty = $(tr).find('.qty').val();
let price = $(tr).find('.price').val();
let discount = $(tr).find('.discount').val();
let amount = (qty * price * (100 - discount)) / 100;
$(tr).find('.amount').html(amount);
}

sum the values of input fields on keyup [duplicate]

This question already has answers here:
How to add two strings as if they were numbers? [duplicate]
(20 answers)
Closed 3 years ago.
I want to add all input fields values. Some of the fields are constant and some too you have to click on a button to add them and calculate the values.
The add button when clicked adds the input fields correctly but the calculation of all the values is the problem.
$(document).on("keyup", ".price", function() {
var closestParent = $(this).closest('tr');
var total = closestParent.find(".price").val();
var tuition = document.getElementById("tuition").value;
var pta = document.getElementById("pta").value;
var transport = document.getElementById("transport").value;
var totals = parseInt(total);
var t = 0;
$('.price').each(function(i, e) {
var amt = $(this).val() - 0;
var z = t += amt;
var totalz = z + tuition + transport + pta;
document.getElementById("tot").value = tuition;
console.log(t);
console.log(tuition)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 60%;">
<h5>Tuition Fees </h5>
</td>
<td>
<input class="form-control" id="tuition" name="tuition_fees" type="text" placeholder="Enter Tuition Fees..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>PTA Dues </h5>
</td>
<td>
<input class="form-control" id="pta" name="PTA_dues" type="text" placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>Transport Fares </h5>
</td>
<td>
<input class="form-control" id="transport" name="transport_fares" type="text" placeholder="Enter Transport Fare..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td colspan="2">
<h5>Additional Fees </h5>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
<tbody>
<tr>
<td style="width: 60%;">
<div class="row">
<div class="col-md-1"><input class="itemRow" type="checkbox"></div>
<div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control price" autocomplete="off"></div>
</div>
</td>
<td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control" autocomplete="off"></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
<button class="btn btn-success" id="addRows" type="button">+ Add item</button>
</div>
</div>
<br/>
<table class="table table-bordered">
<tr>
<td style="width:60%;">
<h5>TOTAL FEES </h5>
</td>
<td><input class="form-control" id="tot" name="total_fees" type="text" placeholder="total fees" value="" style="border:none;" /></td>
</tr>
</table>
What I want to do is get the total summation of the values in the total fees input field
parse your textbox values using parseInt. then you are redefining t everytime so I edited it. then move your class name price from enter fee name to enter amount textbox.
$(document).on("keyup",".price",function(){
var closestParent = $(this).closest('tr');
var total = parseInt(closestParent.find(".price").val());
var tuition = parseInt(document.getElementById("tuition").value);
var pta = parseInt(document.getElementById("pta").value);
var transport = document.getElementById("transport").value;
var totals = parseInt(total);
var t = 0;
$('.price').each(function(i,e){
var amt =$(this).val()-0;
t += amt;
var z = t;
var totalz = z + tuition + transport + pta;
document.getElementById("tot").value=tuition;
console.log(t);
console.log(tuition)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody>
<tr>
<td style="width: 60%;">
<h5>Tuition Fees </h5>
</td>
<td>
<input class="form-control" id="tuition" name="tuition_fees" type="text"
placeholder="Enter Tuition Fees..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>PTA Dues </h5>
</td>
<td>
<input class="form-control" id="pta" name="PTA_dues" type="text"
placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>Transport Fares </h5>
</td>
<td>
<input class="form-control" id="transport" name="transport_fares" type="text"
placeholder="Enter Transport Fare..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td colspan="2" >
<h5>Additional Fees </h5>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
<tbody>
<tr>
<td style="width: 60%;"><div class="row">
<div class="col-md-1"><input class="itemRow" type="checkbox"></div>
<div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control" autocomplete="off"></div></div></td>
<td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control price" autocomplete="off"></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
<button class="btn btn-success" id="addRows" type="button">+ Add item</button>
</div>
</div>
<br/>
<table class="table table-bordered">
<tr>
<td style="width:60%;" >
<h5>TOTAL FEES </h5>
</td>
<td><input class="form-control" id="tot" name="total_fees" type="text"
placeholder="total fees" value="" style="border:none;" /></td>
</tr>
</table>

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 generate the rows automatically based on input values?

<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
This is input text box code in view page......
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
This is my table code.... in view page
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
This is javascript for automatic cell creation.
My problem is how to create a automatic rows by giving input into input fields.
And the sno is automatically generate(i.e 1,2... based on the input values).
please help to solve this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
<label class="col-lg-1 control-label" id="pd">Due Start:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Dateā€¦" id="txtDate" name="TDDate" value="">
</div>
</div>
</div>
</div>
<div class="container">
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody id="appendRows">
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno" value="1"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
<script type="text/javascript">
$(function(){
$("body").on("focusout",".Mode",function(){
var trLength=$('body #appendRows tr').length;
for (var i = 1; i <trLength; i++) {
$('#appendRows tr:nth-child(2)').remove();
}
var val = $(this).val();
var i=0;
for(i==0;i<val;i++){
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i+2);
$('#appendRows').append(html);
}
});
})
</script>

Categories