I've a table with header and footer and a default row already created. When I add more rows dynamically I don't get the exact row count. It always returns the correct row count if I add them before.
Below is the code I've written -
<table id="empTable" class="table table-responsive table-striped table-bordered">
<thead>`enter code here`
<tr>
<td>Name of Employee</td>
<td>Father's Name/Husband's Name</td>
<td>Basic</td>
<td>Total attendance</td>
<td>Clear</td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button></th>
</tr>
</tfoot>
</table>
<script>
//function to add/remove rows
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
//function to return value of Dynamic content
function GetDynamicTextBox(value) {
return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
}
</script>
And I'm using this line to return row count but it's not working -
var rowCount = document.getElementById("TextBoxContainer").rows.length;
$('#btnSave').on('click', function() {
alert(rowCount);
})
I've tried all the solutions from stackoverflow but not getting why it's not working for dynamic rows whereas same code I saw in a fiddle working.
Please help.
Because you create new rows on the fly you need to move this line:
var rowCount = document.getElementById("TextBoxContainer").rows.length;
inside:
$('#btnSave').on('click', function() {
And as per #charlietf comment I would suggest to change the row count in:
var rowCount = $("#TextBoxContainer tr").length;
//function to return value of Dynamic content
function GetDynamicTextBox(value) {
return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
'<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
}
$(function () {
$('#btnSave').on('click', function() {
var rowCount = $("#TextBoxContainer tr").length;
console.log('Rows: ' + rowCount);
})
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="empTable" class="table table-responsive table-striped table-bordered">
<thead>`enter code here`
<tr>
<td>Name of Employee</td>
<td>Father's Name/Husband's Name</td>
<td>Basic</td>
<td>Total attendance</td>
<td>Clear</td>
</tr>
</thead>
<tbody id="TextBoxContainer">
<tr>
<td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i> Add </button>
<button id="btnSave" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="ASavee controls"><i class="glyphicon glyphicon-plus-sign"></i> Save </button></th>
</tr>
</tfoot>
</table>
Related
I'm saving row for row into a sql table, here is the code for my table in the view.
<table id="submissionTable" class="table table-bordered">
<thead>
<tr>
<th colspan="1" style="background-color:lightsteelblue">
stuffID
</th>
<th colspan="1" style="background-color:lightsteelblue">
stuffDescription
</th>
</tr>
</thead>
<tr id="tablerow0">
<td>
<div class="editor-field">
<input class="text-box single-line" name="stuffID[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<div class="editor-field">
<input class="text-box single-line" name="stuffDescription[0]" type="text" value="" required="required" />
</div>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="removeTr(0);">Delete</button>
</td>
</tr>
</table>
<p style="text-align:center">
<button id="add" type="button" class="btn btn-primary">Add</button>
</p>
<hr />
</fieldset>
<table class="table table-bordered" style="width:80%" align="center">
<tbody>
<tr>
<th style="text-align:center">
<input type="submit" value="SUBMIT" class="btn btn-info" />
</th>
</tr>
</tbody>
</table>
The javascript code
var counter = 1;
$(function () {
$('#add').click(function () {
$('<tr id="tablerow' + counter + '"><td>' +
'<input type="text" class="text-box single-line" name="stuffID[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<input type="text" class="text-box single-line" name="stuffDescription[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');">Delete</button>' +
'</th>' +
'</tr>').appendTo('#submissionTable');
counter++;
return false;
});
});
And then I want to insert the rows into SQL from the controller
for (int i = 0; i <= Request.Form.Count; i++)
{
tblGoods.stuffID= Request.Form["stuffID[" + i + "]"];
tblGoods.stuffDescription= Request.Form["stuffDescription[" + i + "]"];
tblGoods.DetailID = getID;
}
_context.tbl_Goods.Add(tblGoods);
_context.SaveChanges();
However, when I am saving only 1 row, it populates the one row plus 5 more empty rows into my SQL table.
What am I doing wrong?
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>
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>
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>
Jquery add more and delete conflicting and shows wrong value
When i add more rows working fine like 1-2-3-4
But when i delete one row then it again add 1-2-3-3
and when i delete two rows then it shows 1-4-3-4
I want this properly working i try too methods but no luck
$(function() {
var scntDiv = $('#pmore');
var i = $('#pmore tr').size() + 1;
$('.addmore').on('click', function() {
$('<tr><td align="center">' + i + '</td><td><input type="text" data-type="productName" name="itemName[]" id="itemName_' + i + '" class="form-control autocomplete_txt" ></td><td><input type="number" name="price[]" id="price_' + i + '" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="quantity[]" id="quantity_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="total[]" id="total_' + i + '" class="form-control totalLinePrice" autocomplete="off" readonly></td><td><button class="btn btn-danger" id="dlt" type="button">- Delete</button></td><td></td></tr>').appendTo(scntDiv);
i++;
return false;
});
$(document).on('click', '#dlt', function() {
if (i > 2) {
$(this).parents('tr').remove();
i--;
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" class="table table-striped table-bordered dataTable">
<thead>
<tr>
<th width="5%">S no</th>
<th width="35%">Part Name</th>
<th width="10%">Price</th>
<th width="10%">Quantity</th>
<th width="10%">Total</th>
<th width="30%" colspan="2">Action</th>
</tr>
</thead>
<tbody id="pmore">
<tr>
<td align="center">1</td>
<td>
<input type="text" data-type="productName" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" required>
</td>
<td>
<input type="number" name="price[]" id="price_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</td>
<td>
<input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</td>
<td>
<input type="number" name="[total]" id="total_1" class="form-control totalLinePrice" readonly>
</td>
<td align="center">
<button class="btn btn-success addmore" type="button">+ Add More</button>
</td>
<td align="center">
<button class="btn btn-danger dlt" type="button">- Delete</button>
</td>
</tr>
</tbody>
</table>
When you remove an item, you need to make sure that the following items indexes are reduced by 1
$(function() {
var scntDiv = $('#pmore');
var i = $('#pmore tr').size() + 1;
$('.addmore').on('click', function() {
$('<tr><td align="center">' + i + '</td><td><input type="text" data-type="productName" name="itemName[]" id="itemName_' + i + '" class="form-control autocomplete_txt" ></td><td><input type="number" name="price[]" id="price_' + i + '" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="quantity[]" id="quantity_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="total[]" id="total_' + i + '" class="form-control totalLinePrice" autocomplete="off" readonly></td><td><button class="btn btn-danger" id="dlt" type="button">- Delete</button></td><td></td></tr>').appendTo(scntDiv);
i++;
return false;
});
$(document).on('click', '#dlt', function() {
if (i > 2) {
var $tr = $(this).closest('tr');
$tr.nextAll().find('td:first-child').text(function(i, text) {
return --text;
});
$tr.remove();
i--;
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" class="table table-striped table-bordered dataTable">
<thead>
<tr>
<th width="5%">S no</th>
<th width="35%">Part Name</th>
<th width="10%">Price</th>
<th width="10%">Quantity</th>
<th width="10%">Total</th>
<th width="30%" colspan="2">Action</th>
</tr>
</thead>
<tbody id="pmore">
<tr>
<td align="center">1</td>
<td>
<input type="text" data-type="productName" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" required>
</td>
<td>
<input type="number" name="price[]" id="price_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</td>
<td>
<input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</td>
<td>
<input type="number" name="[total]" id="total_1" class="form-control totalLinePrice" readonly>
</td>
<td align="center">
<button class="btn btn-success addmore" type="button">+ Add More</button>
</td>
<td align="center">
<button class="btn btn-danger dlt" type="button">- Delete</button>
</td>
</tr>
</tbody>
</table>