I created a simple stock saving table for my project. Also i added a button to add row to my table.this is my table,
[add button]
+---------------+-----------+-----------+
+ lense type + qty + total +
+---------------+-----------+-----------+
+ + + +
+---------------+-----------+-----------+
+ grand total : LKR +
+---------------------------------------+
EDIT
I added html code of the table,
<table class="table" id="tbl-add-lense">
<thead style="background-color:#f5edff;">
<th style="width:2%;"><input type="checkbox" name="chk_in" id="checkall"></input></th>
<th style="width:2%;">item no</th>
<th style="width:5%;">Lense Type</th>
<th style="width:5%;">Unit price</th>
<th style="width:5%;">Quantity</th>
<th style="width:5%;">Total</th>
</thead>
<tbody id="tbl-lesne-body">
<tr id="addr0">
<td><input type="checkbox" name="chk_in"></input></td>
<td>1</td> <td><input name='tb-lense-type1' type='text' placeholder='Lense Type' class='form-control '/> </td>
<td><input name='td-lunit1' type='number' placeholder='0' class='form-control'></td>
<td><input name='td-lqty1' type='number' placeholder='0' class='form-control'></td>
<td><input name='tb-ltotal1' type='number' placeholder='00.00' class='form-control total'></td>
</tr>
</tbody>
<tfooter></tfooter>
</table>
This table has one row. I used add button to add more rows. add row button code,
$("#add-lense-row").click(function(){
$("#tbl-lesne-body").append("<tr id='addr"+(i+1)+"'><td><input type='checkbox' name='chk_in'></input></td><td>"+ (i+1) +"</td> <td><input name='tb-lense-type"+i+"' type='text' placeholder='Lense Type' class='form-control '/> </td> <td><input name='td-lunit"+i+"' type='number' placeholder='0' class='form-control'></td><td><input name='td-lqty"+i+"' type='number' placeholder='0' class='form-control'></td><td class='tot'><input name='td-ltotal"+i+"' type='number' placeholder='00.00' class='form-control total'></td></tr>");
i++;
});
total <td> has a input ,
<input name='tb-ltotal1' type='number' placeholder='00.00' class='form-control total'>
I need to get sum of total td inputs when typing on a input. I tried this code,
$(".total").keyup(function(){
console.log('Typing');
sum += parseFloat($(this).val());
});
but it only working on the first table row. If i add a new row and try this code. It's not working. I removed sum += parseFloat($(this).val()); line and tried. Still code working only in the first row. How to solve this. Thank you
Your code needed some corrections:
You were only getting the value of input that triggered the 'keyup' event, as the sum. But you needed to loop through all inputs with class total and add the values of all to get the grand total.
As only the first row was added through html and rest of the rows were being added dynamically through javascript/jquery, your normal event binding worked only for the first row. For dynamically generated elements i.e. the elements which were not there when the page first loaded, you need to use slightly different syntax for event binding e.g. $(document).on("keyup", ".total", function(){}). By binding events dynamically in this way, keyup event now fires on all inputs.
$(document).on("keyup", ".total", function(){
console.log('Typing');
var sum = 0;
$(".total").each(function(index){
sum += parseFloat($(this).val());
});//each
console.log( sum );
});//keyup`
Related
I have a table in my page and i have input type text in each row, one of them is for srno
I want to get the value of srno text box from the last row of the table using JavaScript.
Here's a code snippet with my HTML:
<table id="vattable" class="table table-sm table-striped">
<thead class="thead-light">
<tr>
<th style="width:50px">SRNo</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="text-control input-sm" readonly name="srno[]" id="srno" value=1 style="text-align:right;max-width:40px;" maxlength="13" /></td>
</tr>
</tbody>
</table>
Actually I am adding rows on button click event in JavaScript, I want to get the last value of srno column and give the next srno with +1 each time the row is created in the table. when the page is loaded I am selecting data from database and fetching in this table so sometime this table may have few rows already and when I click button to create row it should take the last srno and add +1 to the new row srno.
I think that this should work for you if you have a similar HTML structure.
What it basically does is:
Scanning the table structure for all inputs with name=srno.
Getting the last input and logging in the javascript console.
You can get its value with lastInput.value.
function getLastInput() {
//get all inputs with name srno in an array
const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');
//get the last input from the array by referring the highest index of the array
const lastInput = allInputs[allInputs.length - 1];
return lastInput;
}
$(document).ready(function() {
var rowcnt = $('#vattable tr').length;
var count = rowcnt;
$(document).on('click', '#addrow', function() {
count = count + 1;
var html_code = '';
html_code += '<tr id="row_id_' + count + '">';
html_code += '<td><input type="text" class="text-control input-sm" name="srno[]" id="srno" readonly style="text-align:right;width:40px" value="' + count + '"/></td>';
html_code += '</tr>';
$('#vattable').append(html_code);
console.log(getLastInput());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="vattable">
<tr>
<td>
<input type="text" name="srno[]" value="1" />
</td>
</tr>
<tr>
<td>
<input type="text" name="srno[]" value="2" />
</td>
</tr>
<tr>
<td>
<input type="text" name="srno[]" value="3" />
</td>
</tr>
<tr>
<td>
<input type="text" name="srno[]" value="4" />
</td>
</tr>
</table>
<button id="addrow">Add row</button>
EDIT:
Use this if your input name is srno[].
//get all inputs with name srno[] in an array
const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');
//get the last input from the array by referring the highest index of the array
const lastInput = allInputs[allInputs.length - 1];
console.log(lastInput);
How to fetch first table value row by row and show these values in a dynamically created row with the same name in table 2.
I got first table value row by row by I cannot show these value in row by row in the table. In table 2 it shows the value with last row value it cannot insert value in next row but it can override the first-row value.
$(document).ready(function() {
$("#tbUser").on('click', '.btnDelete', function() {
var idx = $(this).closest('tr').index();
$("#tbUser").find("tr").eq(idx).remove();
$("#tbUsers").find("tr").eq(idx - 1).remove();
});
$("#tbUser").on('click', '.btnAdd', function() {
$("#tbUser").append("<tr class='item'><td>Pad</td><td id='selection'>0.000307</td><td><input type='text' name='BottomHoleRate' id='BottomHoleRate'></td><td><input type='text' name='CleanVolume' id='CleanVolume'></td><td><input type='text' name='BottomHoleConcentration' id='BottomHoleConcentration'></td><td>v 2.2</td><td><input type='text' name='Chemvol' id='Chemvol'></td><td><button class='btnAdd'>Add</button></td><td><button class='btnDelete'>Delete</button></td></tr>");
$("#tbUsers").append("<tbody><tr><td><input type='text' name='StageTime' id='StageTime' value=''></td><td><input type='text' name='SlurryRate' id='SlurryRate'></td><td><input type='text' name='CleanRate' id='CleanRate'></td><td><input type='text' name='BlenderConcentration' id='BlenderConcentration'></td><td><input type='text' name='ProppantVolumeRate' id='ProppantVolumeRate'></td><td><input type='text' name='ProppantMassRate' id='ProppantMassRate'></td><td><input type='text' name='ProppantAVG' id='ProppantAVG'></td><td><input type='text' name='ProppantStageMass' id='ProppantStageMass'></td><td><input type='text' name='ProppantCumulativeMass' id='ProppantCumulativeMass'></td><td><input type='text' name='ProppantVolume' id='ProppantVolume'></td><td><input type='text' name='ProppantCumulativeVolume' id='ProppantCumulativeVolume'></td><td><input type='text' name='SlurryStageVolume' id='SlurryStageVolume'></td><td><input type='text' name='SlurryCumulativeVolume' id='SlurryCumulativeVolume'></td></tr></tbody>");
$("#tbUsers2").append("<tr><td>Pad</td></tr>");
$("#tbUsers3").append("<tr><td>Pad</td></tr>");
});
});
$('button').on('click', function() {
$("tr.item").each(function() {
var BottomHoleRate = $(this).find("input[name='BottomHoleRate']").val(),
CleanVolume = $(this).find("input[name = 'CleanVolume']").val();
bhc = $(this).find("input[name = 'BottomHoleConcentration']").val();
Chemvol = $(this).find("input[name = 'Chemvol']").val();
// SlurryStageVolume=document.getElementById('SlurryStageVolume').value;
SlurryRate = BottomHoleRate;
blenderconcentration = bhc;
ProppantAVG = document.getElementById('selection').innerText;
proppant_stage_mass = CleanVolume * bhc;
pro_cum_mass = proppant_stage_mass;
proppant_vol = proppant_stage_mass * ProppantAVG;
pro_cum_vol = proppant_vol;
slurry_stage_vol = CleanVolume * (1 + ProppantAVG * bhc);
slurry_cum_vol = slurry_stage_vol;
cleanrate = SlurryRate / (1 + ProppantAVG + bhc);
stage = slurry_stage_vol / SlurryRate;
proppant_vol_rate = cleanrate * bhc * ProppantAVG;
proppant_mass_rate = cleanrate * bhc;
chem_rate1 = Chemvol * cleanrate;
chem_vol = Chemvol * CleanVolume;
document.getElementById('StageTime').value = stage;
document.getElementById('SlurryRate').value = SlurryRate;
document.getElementById('CleanRate').value = cleanrate;
document.getElementById('BlenderConcentration').value = blenderconcentration;
document.getElementById('ProppantVolumeRate').value = proppant_vol_rate;
document.getElementById('ProppantMassRate').value = proppant_mass_rate;
document.getElementById('ProppantAVG').value = ProppantAVG;
document.getElementById('ProppantStageMass').value = proppant_stage_mass;
document.getElementById('ProppantCumulativeMass').value = pro_cum_vol;
document.getElementById('ProppantVolume').value = proppant_vol;
document.getElementById('ProppantCumulativeVolume').value = pro_cum_vol;
document.getElementById('SlurryStageVolume').value = slurry_stage_vol;
document.getElementById('SlurryCumulativeVolume').value = slurry_cum_vol;
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<table id="tbUser" class="tblUser" name="tblUser">
<tr>
<td><button class="btnDelete">Delete</button></td>
<td><button class="btnAdd">Add</button></td>
</tr>
<tr>
<th>Stage Name</th>
<th>Proppant Selection</th>
<th>Bottom Hole Rate</th>
<th>Clean Volume</th>
<th>Bottom Hole Concentration</th>
<th>Quality</th>
<th>Chem 1 Vol/Vol</th>
</tr>
</table>
<h2>table 2</h2>
<table id="tbUsers">
<tr>
<th>Stage Time (min)</th>
<th>Slurry Rate</th>
<th>Clean Rate</th>
<th>Blender Concentration</th>
<th>Proppant Volume Rate</th>
<th>Proppant Mass Rate</th>
<th>Proppant AVG</th>
<th>Proppant Stage Mass</th>
<th>Proppant Cumulative Mass</th>
<th>Proppant Volume</th>
<th>Proppant Cumulative Volume</th>
<th>Slurry Stage Volume</th>
<th>Slurry Cumulative Volume</th>
</tr>
</table>
<h2>table 3</h2>
<table id="tbUsers2">
<tr>
<th>Chem rate 1</th>
</tr>
</table>
<h2>table 4</h2>
<table id="tbUsers3">
<tr>
<th>Chem Volume 1</th>
</tr>
</table>
<input type="button" name="submit" value="submit" />
<button>submit</button>
I guess problem is that you have duplicate IDs. The ID should be unique and used only once on a page. You should replace them with classes like this (while you adding them):
$("#tbUsers").append("<tbody><tr><td><input type='text' name='StageTime' class='StageTime' value=''></td><td><input type='text' name='SlurryRate' class='SlurryRate'></td><td><input type='text' name='CleanRate' class='CleanRate'></td><td><input type='text' name='BlenderConcentration' class='BlenderConcentration'></td><td><input type='text' name='ProppantVolumeRate' class='ProppantVolumeRate'></td><td><input type='text' name='ProppantMassRate' class='ProppantMassRate'></td><td><input type='text' name='ProppantAVG' id='ProppantAVG'></td><td><input type='text' name='ProppantStageMass' class='ProppantStageMass'></td><td><input type='text' name='ProppantCumulativeMass' class='ProppantCumulativeMass'></td><td><input type='text' name='ProppantVolume' class='ProppantVolume'></td><td><input type='text' name='ProppantCumulativeVolume' class='ProppantCumulativeVolume'></td><td><input type='text' name='SlurryStageVolume' class='SlurryStageVolume'></td><td><input type='text' name='SlurryCumulativeVolume' class='SlurryCumulativeVolume'></td></tr></tbody>");
Then you should fill the values like this
document.getElementsByClassName('SlurryRate')[0].value = SlurryRate;
document.getElementsByClassName('SlurryRate')[1].value = SlurryRate;
NOTE:
document.getElementsByClassName('SlurryRate')
returns an array of elements, so you have to fill all the elements.
Of course, you can write a nice function to handle this in a cleaner way, however this should work.
The issue is with duplicate ID. Any element on the page must have a unique ID. If there are duplicate ID for elements, the element at the top of the DOM gets selected every time.
You have also put the name attribute for each input field. You can avoid adding class. The following snippet selects the last element in DOM for the given name and effectively, the last row -
$(input[name="NameOfYourField"]).last().val(ValueOfThisField);
I have implemented the above for some of your input fields in this pen
https://codepen.io/xpri/pen/PyJMNO
You can see your expected behavior in this.
I'm trying to add row consist of three textbox dynamically on click of button with id=btnASize and on click of button with id=btnASizeR want to add a row consist of four textboxes. and on click of button with id=btnWdDelete want to delete the last row which is generated with textboxes and so on.
The three buttons which is mentioned above are generated dynamically and rows with textboxes which will be generated below existing rows are also created on click of those dynamic buttons.Any idea would be appreciated Refer image
$("#btnASize").click(function () {
AddRow($("#SizeR").val(), $("#TolMin").val(), $("#TolMax").val());
$("#SizeR").val("");
$("#TolMin").val("");
$("#TolMax").val("");
});
function insertRow(){}
function AddRow(SizeRange, Tolerancemin,Tolerancemax) {
//Get the reference of the Table's thead element.
var tBody = $("#WireDimTbl > thead> tr")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Size cell.
var cell = $(row.insertCell(-1));
cell.html(SizeR);
//Add TolMin cell.
cell = $(row.insertCell(-1));
cell.html(TolMin);
//Add TolMax cell.
cell = $(row.insertCell(-1));
cell.html(TolMax);
}
$("#btnWdDelete").click(function () {
var row = $("#SizeR").closest("tr");
//Get the reference of the Table.
var table = $("#WireDimTbl")[1];
//Delete the Table row using it's Index.
table.deleteRow(row[1].rowIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
<td>
<input type='button' ID='btnASize' value='AddSize' />
<input type='button' ID='btnASizeR' value='AddSizeRange' />
<input type='button' ID='btnWdDelete' value='Delete' />
<table ID='WireDimTbl' class='table table-bordered'>
<thead>
<tr>
<th class='text-center'>Size Range (mm)</th>
<th class='text-center'>Tolerance (-)mm</th>
<th class='text-center'>Tolerance (+) mm</th>
</tr>
</thead>
<tr>
<td class='text-center'>
<input type='text' ID='SizeR' value='2.00' />
</td>
<td>
<input type='text' ID='TolMin' value='1' />
</td>
<td>
<input type='text' ID='TolMax' value='1' />
</td>
</tr>
</table>
</td>
</tr>
I prepared this sample to fulfill your requirement, although not a complete solution. You have to write some code by yourself. But this will give you a pretty good idea.
$('#btnAdd').click(function() {
var textboxSize = "<input class='form-control' type='text' class='size range'>";
var textboxTolerance = "<input class='form-control' type='text' class='tolerance'>";
var markup = "<tr><td>" + textboxSize + "</td><td>" + textboxTolerance + "</td></tr>";
$("#myTable tbody").append(markup);
});
$('#btnDelete').click(function() {
$("#myTable tbody>tr:last").remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<input class="btn-primary" id="btnAdd" type="button" value="Add Row">
<input class="btn-primary" id="btnDelete" type="button" value="Delete">
<table class="table" id="myTable">
<thead>
<th>
Size Range
</th>
<th>
Tolerance
</th>
</thead>
<tbody>
</tbody>
</table>
I think there are a few issues with your code.
You call insertRow on an HTMLTableRowElement. insertRow is a HTMLTableElement method, so we need to make sure we're calling it on a HTMLTableElement, instead of a HTMLTableRowElement. To fix this, we'll select the table. We can then use insertRow() on it.
You call $(row.insertCell(-1)) to insert a cell. This is invalid jQuery code. insertCell is a plain JS method for a HTMLTableRowElements, so we need to make sure we're calling it on the appropriate type of element. Specifically, we'll use row.insertCell(), instead of $(row.insertCell(-1)).
The Delete function contains similar errors, but I'll leave that one as is so you can learn by correcting it yourself.
$("#btnASize").click(function() {
AddRow($("#SizeR").val(), $("#TolMin").val(), $("#TolMax").val());
$("#SizeR").val("");
$("#TolMin").val("");
$("#TolMax").val("");
});
function AddRow(SizeRange, Tolerancemin, Tolerancemax) {
//Get the reference of the Table's thead element.
var tBody = $("#WireDimTbl")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Size cell.
var cell1 = row.insertCell(-1);
$(cell1).text(SizeRange);
//Add TolMin cell.
var cell2 = row.insertCell(-1);
$(cell2).text(Tolerancemin);
//Add TolMax cell.
var cell3 = row.insertCell(-1);
$(cell3).text(Tolerancemax);
}
$("#btnWdDelete").click(function() {
var row = $("#SizeR").closest("tr");
//Get the reference of the Table.
var table = $("#WireDimTbl")[1];
//Delete the Table row using it's Index.
table.deleteRow(row[1].rowIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
<td><input type='button' ID='btnASize' value='AddSize' /><input type='button' ID='btnASizeR' value='AddSizeRange' /><input type='button' ID='btnWdDelete' value='Delete' />
<table id='WireDimTbl' class='table table-bordered'>
<thead>
<tr>
<th class='text-center'>Size Range (mm)</th>
<th class='text-center'>Tolerance (-)mm</th>
<th class='text-center'>Tolerance (+) mm</th>
</tr>
</thead>
<tr>
<td class='text-center'><input type='text' ID='SizeR' value='2.00' /></td>
<td><input type='text' ID='TolMin' value='1' /></td>
<td><input type='text' ID='TolMax' value='1' /></td>
</tr>
</table>
</td>
</tr>
I'm removing table tbody set and inserting new ones but I'm loosing click event on chekcbox. How can I solve this issue?
I went through append(), clone() but failed to apply to my code so for that reason I created a JSFIDDLE which has everything.
Please tell me what I need to do.
Thanks in advance.
JSFIDDLE - CODE IS HERE
JQUERY:
$(window).load(function(){
$('.add-selected').on("click",function() {
alert('hello');
});
$('#removeAndAdd').click(function(event) {
event.preventDefault();
var output = '';
output += '<tbody class="filter-rows">';
output += '<tr class="filter">';
output += '<td><input type="checkbox" id="c-1" class="add-selected" /></td>';
output += '<td>1</td>';
output += '</tr>';
output += '</tbody>';
output += '<tbody class="filter-rows">';
output += '<tr class="filter">';
output += '<td><input type="checkbox" id="c-2" class="add-selected" /></td>';
output += '<td>2</td>';
output += '</tr>';
output += '</tbody>';
$('.filter-rows').empty();
$('#add-new-table tbody:last').after(output);
});
});
HTML:
<table id="add-new-table" border="1px">
<thead>
<th>ID</th>
<th>SKU</th>
</thead>
<tbody>
<tr>
<td>Lbel</td>
<td>011</td>
</tr>
</tbody>
<tbody class="filter-rows">
<tr class="filter">
<td><input type="checkbox" id="c-1" class="add-selected" /></td>
<td>1</td>
</tr>
</tbody>
<tbody class="filter-rows">
<tr class="filter">
<td><input type="checkbox" id="c-2" class="add-selected" /></td>
<td>2</td>
</tr>
</tbody>
<tbody class="filter-rows">
<tr class="filter">
<td><input type="checkbox" id="c-3" class="add-selected" /></td>
<td>3</td>
</tr>
</tbody>
</table>
<br />
<span id='removeAndAdd'>Click me to Remove all first and Add new rows</span>
There some bad practices here. Firstly the fixed version:
http://jsfiddle.net/678CP/5/
$('#add-new-table').on('change', 'input', function() {
alert('hello');
});
$('#removeAndAdd').click(function(event) {
event.preventDefault();
var rows = $('#add-new-table .filter-rows');
rows.first().add(rows.last()).remove();
});
I am going to assume you need to make a new tbody for every row - otherwise remove it.
Why re-create the whole table? I am assuming you don't need to, if you do the code needs some changes.
Why wait for domLoad? I have change it to onDomReady (fiddle settings)
A clickable element should be an anchor <a> with an href
I know this is just a demo but I am hoping you don't mix double and single quotes in your html and javascript and that you don't use IDs everywhere
How it works:
By using the second parameter of jQuery's on we have created an event delegate. This means that the event is placed on the table itself #add-new-table and it is listening for changes to any inputs inside the table. So it is one single event and it doesn't care if stuff inside is updated/removed etc. It is also more efficient.
And a small explanation of var rows = $('#add-new-table .filter-rows'); rows.first().add(rows.last()).remove();:
"Get all the filter rows and store that. Then select the first row and add the last row to that selection, finally remove them"
Just need your help.
My problem is I am creating a dynamic form. In my form there is a button and below that is a table.
The scenario is:
1. The user will click the the button
2. After clicking the button the table row will dynamically added. Inside my row there is a textbox
I can do that but how can i do the process after the user click the button. The row will append together with a textbox. But I want to assign a unique ID in a textbox. In my case I want to do this incremental.
Here's my js:
$(document).ready(function(){
$("[data-item]").on('click',function(){
$("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr>");
});
});
Here's my table:
<input type="button" name="add" data-item="123" value="ADD" class="test" id="test" />
<table id="grid1" border="1" style="width: 40%">
<thead>
<tr>
<th style="text-align: center;">CODE</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Here's the fiddle:
http://jsfiddle.net/rochellecanale/xvdMz/
keep a counter
$(document).ready(function(){
var counter = 0;
$("[data-item]").on('click',function(){
$("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='in-" + counter++ + "' /></td></tr>");
});
});
Demo: Fiddle
You can do it this way:
When you create a new row you can check for the current input's length and add that as a part of id.
$("[data-item]").on('click',function(){
var $el = $("<tr><td><input type='text' id='myInput" + ($('#grid1').find('input').length +1) + "' value='123' style='width:100px' id='' /></td></tr>");
$("#grid1 tbody").append($el);
});
Demo
I have another suggestion that instead of keeping the items to be cloned, you can go for templating, least you can put in your html itself like this.
<script type="text/html" id="clone">
<tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr>
</script>
and then just use that to clone, this way you keep your html in one place and script in another.
$("[data-item]").on('click',function(){
var $el =$($.parseHTML($('#clone').html())).find('input').prop('id', "myInput" + ($('#grid1').find('input').length +1) ).end();
$("#grid1 tbody").append($el);
});
Demo