dynamically add value summation in row and colum

dynamically add value summation in row and colum - javascript

using this code i can already calculate two value in row now I am trying to sum column values below local column field all column value with this,
<table class="table order-list turf" id="turf">
<tr>
<td>Items</td>
<td>Local</td>
<td>Foreign</td>
<td>Total</td>
</tr>
<tr>
<td class="col-sm-3"><input type="text" name="" value="item1"></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="calculated_value"/></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
<input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" />
</td>
</tr>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_total"><input type="text" readonly="" name=""></td>
<td id="foreign_total"><input type="text" readonly="" name=""></td>
<td id="total_total"><input type="text" readonly="" name=""></td>
</tr>
</table>
var counter = 1;
$("body").on("input", ".calculated_value", function() {
var parent_row = $(this).closest('tr');
var totalincome = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find(".total").val(totalincome);
Demo

I hope this is what you need. Code could be refactored but I think you can do it yourself.
$(document).ready(function() {
var counter = 1;
$("body").on("input", ".calculated_value", function() {
calculate(this);
});
function calculate(elm) {
var parent_row = $(elm).closest('tr');
var elTotalIncome = $("#local_milion_grand_total").find("input");
var elTotalForeign = $("#foreign_milion_grand_total").find("input");
var elTotal = $('#total_milion_grand_total').find("input");
var totalincome = 0;
var totalLocal = 0;
var totalForeign = 0;
var total = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find('.total').val(totalincome);
for (i = 0; i < $("tbody tr").length; i++) {
let elCol = $($("tbody tr")[i]).find("td input");
let tmp = parseInt(elCol[1].value);
let tmp2 = parseInt(elCol[2].value);
let tmp3 = parseInt(elCol[3].value);
if (isNaN(tmp)) tmp = 0;
if (isNaN(tmp2)) tmp2 = 0;
if (isNaN(tmp3)) tmp3 = 0;
totalLocal += tmp;
totalForeign += tmp2;
total += tmp3;
}
elTotal.val(total);
elTotalIncome.val(totalLocal);
elTotalForeign.val(totalForeign);
}
//add new row button
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" value="Item ' + counter + '"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
if (counter == 1) return;
$(this).closest("tr").remove();
counter -= 1
calculate(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table order-list turf" id="turf">
<thead>
<tr>
<td>Items</td>
<td>Local(Milion Taka/Milion US$)</td>
<td>Foreign(Milion Taka/Milion US$)</td>
<td>Total(Milion Taka/Milion US$)</td>
<td> <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" /></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-3">
<input type="text" name="" value="item1">
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value2[]" class="form-control calculated_value_row calculated_value" />
</td>
<td class="col-sm-3 total">
<input type="text" name="total[]" class="form-control total" id="total" readonly="" />
</td>
<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>
</tr>
</tbody>
<tfoot>
<tr class="grand-total persist">
<td>Total Investment</td>
<td id="local_milion_grand_total"><input type="text" class="form-control local_milion_grand_total" readonly="" name=""></td>
<td id="foreign_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
<td id="total_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
</tr>
</tfoot>
</table>

Related

My function validation does not work on added row

I have a function where my input type="number" data-id="weight" checks whether the user typed a divisible by 5 or not. It is perfectly working on my current row but when i add a new row/s, it is not working. Is there anything i missed? I provided my snippet below. Thank you everyone.
To try it. Please type on the weight column a number that is not divisible by 5, then you'll see the error. Add row and do the same, you will not see the error. My target is my function to work with added rows too.
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight' + rowIndex + '" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand' + rowIndex + '" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
// divisible by only 5
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', () => {
if (input.value % 5 !== 0) {
alert('not valid');
input.value = 5;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto" />
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

This is caused by the event handler for the change event not being fired for dynamically created objects.
When you create an the event handlers like this:
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', () => {
...
}
});
The handler is only mapped for elements that exist when you first run the code. That means any subsequently created dynamic elements will not cause the event to fire.
Instead, use the following syntax to create the event which will catch dynamically created elements by using their selector (input[data-id="weight"]):
$(document).on('change', 'input[data-id="weight"]', function(e) {
if ($(this).val() % 5 !== 0) {
alert('not valid');
$(this).val(5);
}
});
I've removed the other code you had previously that tried to bind the event handler. You don't need to do it that way with jQuery.
Seen here in a working version of your snippet:
$("#addrow").on('click', function(){
let rowIndex = $('.auto_num').length+1;
let rowIndexx = $('.auto_num').length+1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
'<td><input name="lightBand'+rowIndex+'" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
// divisible by only 5
$(document).on('change', 'input[data-id="weight"]', function(e) {
if ($(this).val() % 5 !== 0) {
alert('not valid');
$(this).val(5);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto"/>
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

Add change event listener after adding the table row. Modified the above code as below:
$("#addrow").on('click', function(){
let rowIndex = $('.auto_num').length+1;
let rowIndexx = $('.auto_num').length+1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
'<td><input name="lightBand'+rowIndex+'" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
const list = document.querySelectorAll('input[data-id="weight"]');
const input = list[list.length - 1];
console.log(input)
input.addEventListener('change', inputValidation);
});
const inputValidation = (e) => {
if (e.target.value % 5 !== 0) {
alert('not valid');
e.target.value = 5;
}
}
// divisible by only 5
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', inputValidation);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto"/>
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

Get the closest td of particular td in a table

I am looking to add the table rows dynamically ,such that id of every element of row should be one more than the ids of tds of previous row.,like if previous row has tds with ids a7,b7,c7 next row will have tds with a8,b8,c8 and so on
var rowCount=0;
function createit(){
rowCount++;
var tds=$("#addrowtd").closest('tr').children().each((a)=>{
//how to get the ids of tds here
console.log(a);
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>

I modified you code in one line to get the last tr from the table and get its id, then increment it .
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id'); this is what I did. may be helpful. please take a look at the snippet. to see the id change please use developer tool.
var rowCount = 0;
function createit() {
rowCount++;
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id');
//debugger;
tds = +tds.match(/\d/g).join('')+1;
console.log(`new id number ${tds}`)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a'+tds+'"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b'+tds+'"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c'+tds+'"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove(); //removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control" />
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block">Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>

I hope this helps ,I have printed all the ids of td in the row except the last one
var rowCount=0;
function createit(){
rowCount++;
let tdarray=[];
var tds=$("#addrowtd").closest('tr').children().not(':last').each((column, td)=>{
tdarray.push($(td).attr('id'));
//how to get the ids of tds here
console.log($(td).attr('id'));
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>

How To Input Number To Textbox Jquery Append

I want to insert number to textbox but i cannot insert when i added row, how to inserted to append textbox?
<script>
$('document').ready(function(){
var counter = 0;
$("#addrow").on("click", function () {
counter = $('#myTable tr').length - 3;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="item' + counter + '"/></td>';
cols += '<td><input type="text" name="stock' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
$('#addrow').attr('disabled', false).prop('value', "Add Row");
});
$('#stock').val(0);
var nilai1 = $('#stock').val();
$('.angka').click(function(){
if($('#stock').val()==0){
nilai1 ='';
}
nilai1 += $(this).val();
$('#stock').val(nilai1);
});
});
</script>
Might be able to help me? for more details here preview

Select any field whether it is added dynamically or not and you're able to add values in selected text field
var counter = 0;
var sItem;
$(document).on('click', '.dumy', function(){
sItem = $(this);
});
$("#addrow").on("click", function () {
counter = $('#myTable tr').length - 3;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="item' + counter + '"/></td>';
cols += '<td><input type="text" class="dumy" name="stock' + counter + '" id="stock' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
$('#addrow').attr('disabled', false).prop('value', "Add Row");
});
$('#stock').val(0);
$('.angka').click(function(){
var nilai1 = $(sItem).val();
if($(sItem).val() == 0){
nilai1 ='';
}
nilai1 += $(this).val();
$(sItem).val(nilai1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input type="button" class="angka" value="1" id="satu">
<input type="button" class="angka" value="2" id="dua">
<input type="button" class="angka" value="3" id="tiga">
</div>
<table id="myTable" class="order-list">
<thead>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" id="addrow" value="Add Row" />
</td>
</tr>
<tr>
<td>Item</td>
<td>Stock</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="item0" id="item" />
</td>
<td>
<input type="text" name="stock0" class="dumy" id="stock" />
</td>
<td><a class="deleteRow"></a>
</td>
</tr>
</tbody>
</table>

Could you better explain your question? It seems to me you are trying to use the [1] [2] [3] buttons to write a value in the selected textbox but instead you only get it to the first one.
If I did not misunderstand you, your problem is right in this piece of code:
var nilai1 = $('#stock').val();
$('.angka').click(function(){
if($('#stock').val()==0){
nilai1 ='';
}
nilai1 += $(this).val();
$('#stock').val(nilai1);
Basically your nila1 variable is always pointing to the DOM object referred by #stock therefore you will always be writing in that specific textbox.
I wouldn't recommend using pure JQuery for doing this kind of dinamic binding, or you could at least reconsider the design of those buttons.
As soon as you'll have better explained your problem I'll try to write down a solution for you keeping this concept.

The simplest way would be to add a value to the input when you create it like this:
(function($) {
let counter = 0;
$("#addrow").on("click", function () {
counter = $('#myTable tr').length - 3;
const newRow = $("<tr>");
let cols = "";
cols += '<td><input type="text" name="item' + counter + '" /></td>';
cols += '<td><input type="text" name="stock' + counter + '" value="0" /></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete" /></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
$('#addrow').attr('disabled', false).prop('value', "Add Row");
});
$('#stock').val(0);
var nilai1 = $('#stock').val();
$('.angka').click(function(){
if($('#stock').val()==0){
nilai1 ='';
}
nilai1 += $(this).val();
$('#stock').val(nilai1);
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="button" class="angka" value="1" id="satu">
<input type="button" class="angka" value="2" id="dua">
<input type="button" class="angka" value="3" id="tiga">
</div>
<table id="myTable" class="order-list">
<thead>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" id="addrow" value="Add Row" />
</td>
</tr>
<tr>
<td>Item</td>
<td>Stock</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="item0" id="item" />
</td>
<td>
<input type="text" name="stock0" id="stock" />
</td>
<td><a class="deleteRow"></a>
</td>
</tr>
</tbody>
</table>

(function($) {
let counter = 0;
$("#addrow").on("click", function () {
counter = $('#myTable tr').length - 2;
$('#current').val(counter);
const newRow = $("<tr>");
let cols = "";
cols += '<td><input type="text" name="item' + counter + '" id="item' + counter + '" /></td>';
cols += '<td><input type="text" name="stock' + counter + '" id="stock' + counter + '" value="0" /></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete" /></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
$('#addrow').attr('disabled', false).prop('value', "Add Row");
});
$('#stock').val(0);
$('.angka').click(function(){
rownumber = $('#current').val();
alert(rownumber);
var nilai1 = $('#stock'+ rownumber ).val();
if($('#stock'+rownumber).val()==0){
nilai1 ='';
}
nilai1 += $(this).val();
$('#stock'+rownumber).val(nilai1);
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="button" class="angka" value="1" id="satu">
<input type="button" class="angka" value="2" id="dua">
<input type="button" class="angka" value="3" id="tiga">
<input type="hidden" id="current" value="" />
</div>
<table id="myTable" class="order-list">
<thead>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" id="addrow" value="Add Row" />
</td>
</tr>
<tr>
<td>Item</td>
<td>Stock</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="item0" id="item0" />
</td>
<td>
<input type="text" name="stock0" id="stock0" rel="0" value="0" />
</td>
<td><a class="deleteRow"></a>
</td>
</tr>
</tbody>
</table>

How to generate table tr based on a total number

i wrote the blow code to generate tr for my table based on a total count .
there is a input type text that contains a number and i want to generatge tr for my table according to that number
but it is not working .
here is my snippet :
function findTotal(){
var table = $("#travells");
var rowNum = parseInt($("#total").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="findTotal()">
<input type="text" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>
</body>

$( document ).ready(function() {
var table = $("#travells");
var rowNum = parseInt($("#total").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="hidden" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>

When constructing these kind of strings, the new template literals from ES6 are a good fit. See here for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
function findTotal(){
var body = document.getElementsByTagName("tbody")[0];
var rowNum = parseInt(document.getElementById("total").value, 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += `<tr>
<td>
${(i + 1)}
</td>
<td>
<input type="name" placeholder="text goes here...">
</td>
<td>
<input type="name" placeholder="text goes here...">
</td>
</tr>`;
};
body.innerHTML = resultHtml;
};
<body onload="findTotal()">
<input type="text" value="8" id="total"/>
<table id="travells">
<thead>
<tr class="travelcounting">
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="Name" readonly/></td>
<td class="columns"><input type="text" id="gender" readonly/></td>
<td class="columns"><input type="text" id="country" readonly/></td>
</tr>
</tbody>
</table>
</body>

$("#RowC").on("click",function(){
var TRCnt=$("tbody >tr").length;
for(var i=TRCnt;i< (parseInt($("#RowNum").val())+TRCnt);i++){
let tr=$("<tr/>");
let inputName=$("<input/>",{type:"text",name:"name",placeholder:"name",value:i+1});
let inputGender=$("<input/>",{type:"text",name:"gender",placeholder:"gender"});
let inputCountry=$("<input/>",{type:"text",name:"country",placeholder:"country"});
tr.append($("<td/>").html(inputName));
tr.append($("<td/>").html(inputGender));
tr.append($("<td/>").html(inputCountry));
$("tbody").append(tr);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="RowNum" />
<input type="button" id="RowC" value="click" />
<hr>
<table>
<thead>
<tr>
<th>name</th>
<th>gender</th>
<th>country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

This is the jquery code:
$("#submitButton").click(function() {
var table = $("#resultTable");
var rowNum = parseInt($("#table-row-num").val(), 10);
var resultHtml = '';
for(var i = 0 ; i < rowNum ; i++) {
resultHtml += ["<tr>",
"<td>",
(i+1),
"</td>",
'<td><input type="name" placeholder="text goes here..."></td>',
'<td><input type="name" placeholder="text goes here..."></td>',
'</tr>'].join("\n");
}
table.html(resultHtml);
return false;
});
I wish you luck with implementation. :)
The Demo here: http://jsfiddle.net/fpd8dwtw/20/

Update total on deleting the row in table

I have a html table where total amount is not getting updated on entering new values and also not getting updated. It only shows NaN.
here is the javascript code:
function totamt(){
var table = document.getElementById("stock");
var total = document.getElementById("total");
var tot = 0;
for(var i=0;i<table.rows.length;i++){
var currentRow = table.rows[i];
tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
}
alert(tot.toString());
document.getElementById('total').innerHTML = tot.toString();
}
$('body').delegate('.remove','click',function(){
$(this).parent().parent().remove();
totalamt();
});
Interactive Snippet
$(function() {
$('#add').click(function() {
addnewrow();
});
$('body').delegate('.remove', 'click', function() {
$(this).parent().parent().remove();
totalamt();
$('.details').delegate('.qty,.price', 'keyup', function() {
var tr = $(this).parent().parent();
var q = tr.find('.qty').val();
var p = tr.find('.price').val();
var a = (q * p);
tr.find('.amt').val(a);
totamt();
});
function totamt() {
var table = document.getElementById("stock");
var total = document.getElementById("total");
var tot = 0;
for (var i = 0; i < table.rows.length; i++) {
var currentRow = table.rows[i];
tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
}
alert(tot.toString());
document.getElementById('total').innerHTML = tot.toString();
}
function addnewrow() {
var n = ($('.details tr').length - 0) + 1;
var tr = '<tr>' +
'<td class="no">' + n + '</td>' +
'<td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>' +
'<td><textarea name="size" id="size" class="form-control size" autocomplete="off"></textarea></td>' +
'<td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off"/></td>' +
'<td><input type="text" name="unit" id="unit" class="form-control unit" autocomplete="off"/></td>' +
'<td><input type="text" name="price" id="price" class="form-control price" autocomplete="off"/></td>' +
'<td><input type="text" name="tax" id="tax" class="form-control tax" data-provide="typeahead" autocomplete="off" /></td>' +
'<td><input type="text" name="dis" id="dis" class="form-control dis" autocomplete="off" /></td>' +
'<td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>' +
'<td><button class="btn btn-danger remove">X</button></td>' +
'</tr>';
$('.details').append(tr);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered" id="stock">
<thead>
<tr>
<td>Sr no.</td>
<td>Product Name</td>
<td>Qty</td>
<td>Rate</td>
<td>Total</td>
<td><input type="button" name="add" id="add" value="+" class="btn btn-warning" /></td>
</tr>
</thead>
<tbody class="details">
<tr>
<td class="no">1</td>
<td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>
<td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off" /></td>
<td><input type="text" name="price" id="price" class="form-control price" autocomplete="off" /></td>
<td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>
<td><button class="btn btn-danger remove">X</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3" style="text-align:right;">Total</th>
<th colspan="2" id="total" class="total"><b>$</b></th>
</tr>
</tfoot>
</table>

Develop Reference

JavaScript is the programming language of the Web.

dynamically add value summation in row and colum - javascript

Related

My function validation does not work on added row

Get the closest td of particular td in a table

How To Input Number To Textbox Jquery Append

How to generate table tr based on a total number

Update total on deleting the row in table

Categories

Resources