<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>
Related
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>
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);
}
I have an HTML table whose rows are created when page loaded,at the end of the row there is a cross button so what I am trying to do is,when I click that button I want to have the values inside the current row, I have ItemName,I Code,Price any many more so I want some fields value when I click that button, My all the cells are in form of input fields only
What I am doing
function rowappend(tbody) {
const markup =
`<tr>
<td>
<input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
</td>
<td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
<td>
<input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
</td>
<td>
<input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
</td>
<td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<input type="hidden" name="unittd" id="unittd" class="form-control commantd">
<td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
</tr>`
$(tbody).append(markup);
}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
$.confirm({
title: '',
content: 'Do you want to clear ?',
buttons: {
Yes: () => {
keys: ['enter', 'space']
action: function() {
var tr = $(this).closest('tr');
var td = tr.find("td").eq(4);
var input = td.find('input');
alert(input.val())
tr.remove();
},
},
No: function() {
},
}
})
}) $(document).keypress(function(event) {
const row = event.target.parentElement.parentElement
var keycode = event.keyCode || event.which;
if (keycode == '13') {
if (event.target.matches('[name=discPercentagetd]')) {
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(event.target.parentElement.parentElement.parentElement)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<div class="row tableGrn" id="commonDvScroll">
<table class="table table-bordered" id="tableInvoice">
<thead>
<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">I Code</th>
<th id="mrpth" class="commanth">MRP</th>
<th id="purRateth" class="commanth">Price</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="discPercentageth" class="commanth">Disc %</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">GST %</th>
<th id="gstAmtth" class="commanth">GST Amt</th>
<th id="totalAmtth" class="commanth">Total Amt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
$(this) in your click function refer to the <i class="fas fa-times fa-2x remove-btn" ></i> so $(this).find('td') will return nothing. You need to use $(this).closest('tr') to get the row first.
function rowappend(tbody) {
const markup =
`<tr>
<td>
<input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
</td>
<td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
<td>
<input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
</td>
<td>
<input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
</td>
<td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<input type="hidden" name="unittd" id="unittd" class="form-control commantd">
<td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
</tr>`
$(tbody).append(markup);
}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
$.confirm({
title: '',
content: 'Do you want to clear ?',
buttons: {
Yes: {
keys: ['enter', 'space'],
action: () => {
var tr = $(this).closest('tr');
var td = tr.find("td").eq(4);
var input = td.find('input');
alert(input.val())
tr.remove();
}
},
No: function() {
},
}
})
})
$(document).keypress(function(event) {
const row = event.target.parentElement.parentElement
var keycode = event.keyCode || event.which;
if (keycode == '13') {
if (event.target.matches('[name=discPercentagetd]')) {
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(event.target.parentElement.parentElement.parentElement)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="row tableGrn" id="commonDvScroll">
<table class="table table-bordered" id="tableInvoice">
<thead>
<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">I Code</th>
<th id="mrpth" class="commanth">MRP</th>
<th id="purRateth" class="commanth">Price</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="discPercentageth" class="commanth">Disc %</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">GST %</th>
<th id="gstAmtth" class="commanth">GST Amt</th>
<th id="totalAmtth" class="commanth">Total Amt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
You can use onclick event for the '.remove-btn'.
/* Adding onclick event */
<i class="fas fa-times fa-2x remove-btn" onclick="fnRemoveRow(this);"></i>
/*Javascript code */
function fnRemoveRow(_this)
{
var $tr=$(_this).closest('tr');
var itemName = $tr.find("#itemNametd").val();
/* Get other values */
$tr.remove();
}
First, find out the parent of that cross button and then find out the value.
Make sure do not use Ids if you are creating multiple rows and do not access using the id because it should be unique and I assumed there will be more then row in this list
$('.remove-btn').click(function(e) {
/* First find out parent of X button then inside that find input element and then value.
I have added here the name while finding the perticular value you can use the id as well but it will not work if more then 1 row.
*/
alert($(this).parent().parent().find('input[name="itemNametd"]').val())
$(this).closest('tr').remove();})}
My problem is, I have to add days based on the input given in the text box for all the rows of the dynamic table.
I have added days for 2 row but 3,4... row displaying the value of 2 row.
Now I want to add days in the 3rd row and goes on..........
<script type="text/javascript">
$(function(){
$("body").on("focusout",function(){
var trLength=$('body #appendRows tr').length;
for (var i = 1; i <trLength; i++) {
$('#appendRows tr:nth-child(2)').remove();
}
var val = $(".ND").val();
var m = $("#follow_Date").val();
var j = $("#Amount").val();
var k = document.getElementById('txtDate').value;
var date = new Date(k);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() +
parseInt(m));
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = mm+ '/' + dd + '/' + y;
var i=1;
for(i==1;i<val;i++){
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i+1);
html.find('input[name^="Date"]').val(someFormattedDate + parseInt(m));
html.find('input[name^="Amount"]').val(j);
console.log(date, i, someFormattedDate)
$('#appendRows').append(html);
}
});
})
</script>
This is a javascript code for creating table..............
This is my dynamic table,it will created based on input value in the text field...
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<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 ><input style="width:40px" type="text" class="form-control" name="Sno[]" value="1" id="Sno"></td>
<td><input style="width:80px" type="text" class="form-control" name="Date[]" value="" id="Date"></td>
<td> <input style="width:70px" type="text" class="form-control" name="Amount[]" value="" 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 table code..................
<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>
</fieldset>
<div class="col-md-2">
<div class="form-group">
<fieldset>
<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>
</div>
This is due start and mode text box code.........
Updated
$(function(){
$('#txtDate, #follow_Date, .ND').keyup( function () {
// Clear rows
var trLength = $('body #appendRows tr').length;
for (var i = 1; i <trLength; i++) {
$('#appendRows tr:nth-child(2)').remove();
}
var val = (!$(".ND").val()) ? 1 : val = $(".ND").val();
var m = $("#follow_Date").val();
var j = $("#Amount").val();
var k = document.getElementById('txtDate').value;
var currentDate = moment(k);
for (var i = 0, len = val; i < val; ++i) {
var newdate = currentDate.add(parseInt(m), 'days');
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i+1);
html.find('input[name^="Amount"]').val(j);
// I format this to make it clear
html.find('input[name^="Date"]')
.val(newdate.format('YYYY/MM/DD'));
$('#appendRows').append(html);
}
// Remove that first row
$("#appendRows tr:first-child").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<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="2018/12/12">
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<fieldset>
<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" value="30">
</div>
</div>
</div>
<label class="col-lg-1 control-label" id="pd">Rows:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" class="ND" placeholder="Number of rows" name="TMode" class="form-control input-xs Mode" value="10">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<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 ><input style="width:40px" type="text" class="form-control" name="Sno[]" value="1" id="Sno"></td>
<td><input style="width:80px" type="text" class="form-control" name="Date[]" value="" id="Date"></td>
<td> <input style="width:70px" type="text" class="form-control" name="Amount[]" value="" 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>
Based on comments, use keyup event on the Mode input to add rows when you enter number into the Mode input...and just add 0 days to the first occurence of the date
function add() {
var val = $(".Mode").val();
var currentdate = document.getElementById('txtDate').value;
currentdate = getDueDate(currentdate, 0);
$("#appendRows tr").not('.master-row').remove(); // remove previous rows (reset the table)
for (var i = 0; i < val; i++) {
var someFormattedDate = formatDate(currentdate);
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i + 1);
html.find('input[name^="Date"]').val(someFormattedDate);
html.removeClass('master-row');
$('#appendRows').append(html);
currentdate = getDueDate(currentdate, val);
}
}
function formatDate(date) {
var dd = date.getDate();
var mm = date.getMonth() + 1;
var y = date.getFullYear();
return mm + '/' + dd + '/' + y;
}
function getDueDate(from, days) {
var fromDate = new Date(from);
var dueDate = new Date(from);
dueDate.setDate(fromDate.getDate() + days * 1);
return dueDate;
}
add();
$('.Mode').on('keyup', function() {
add();
});
.master-row {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
the data
<div>
<input type="text" class="Mode" value="3">
<input type="text" id="txtDate" value="12/29/2018">
</div>
<div style="height:20px">
</div>
the table
<table id="appendRows">
<tr class="master-row">
<td><input type="text" name="Sno"></td>
<td><input type="text" name="Date"></td>
</tr>
</table>
To hide "master-row" i would do something like this, also its better to break code to the separate functions
I want to create a toggle button inside a new row which is created using javascript.
Here is my code
<?php
session_start();
?>
<?php require_once 'dbconnection.php'; ?>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Training Attendance form</title>
<link rel="stylesheet" href="logincss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>
<script>
jQuery(function(){
var counter = 1;
jQuery('a.aaaaa').click(function(event){
event.preventDefault();
var newRow = jQuery('<tr><td colspan="3" class="table-active"><input type="text" name="emp_code[]" class="form-control"></td><td colspan="3" class="table-success"><input type="text" name="emp_name[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td><td colspan="3"><input type="checkbox" id="attendance" name="attendance[]" data-toggle="toggle" data-on="Yes" data-off="No"></td><td><span class="glyphicon glyphicon-remove"></span></td></tr>');
counter++;
jQuery('table.table').append(newRow);
});
});
</script>
<script>
$(function(){
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
<script>
$(function() {
$('#toggleone').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
}) </script>
</head>
<body>
<div class="container">
<div class="row vertical">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><center>Training Attendance form</center></h3>
</div>
<div class="panel-body">
<form class="form-horizontal" action="" method="post" id="loginform"
enctype="multipart/form-data">
<div class="form-group">
<label for="input_trainername" class="col-sm-3 control-label">Trainer Name</label>
<div class="col-sm-8">
<input readonly class="form-control" id="trainername" name="trainername" value="">
</div>
</div>
<div class="form-group">
<label for="input_trainingname" class="col-sm-3 control-label">Training Name</label>
<div class="col-sm-8">
<input readonly class="form-control" id="trainingname" name="trainingname" value="">
</div>
</div>
<div class="form-group">
<label for="input_trainingname" class="col-sm-3 control-label">Date</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="trainingdate" name="trainingdate" value="" onfocus="(this.type='date')" onfocusout="(this.type='text')">
</div>
</div>
<div class="form-group">
<label for="labeldate" class="col-sm-1 control-label">Time</label>
<label for="input_fromdate" class="col-sm-2 control-label">From</label>
<div class="col-sm-3">
<input type="time" class="form-control" id="fromtime" name="fromtime"
placeholder="Pick here">
</div>
<label for="input_todate" class="col-sm-1 control-label">To </label>
<div class="col-sm-3">
<input type="time" class="form-control" id="totime" name="totime" value=""
placeholder="Pick here" >
</div></div>
<div class="form-group">
<label for="input_venue" class="col-sm-3 control-label">Venue</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="venue" name="venue" value="">
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<?php
//session_start();
//echo $_SESSION['year'];
mysql_select_db ("training_db");
$sql = "select * from training_nominated";
$result = mysqli_query($connect,$sql);
$num=mysqli_num_rows($result);
?>
<table align="center" class="table table-bordered"id="tb" border="10" bordercolor="#0066FF" style=\"background-color:#CCFFFF\" width="50%" cellpadding="9" cellspacing="9">
<tr><b>
<td colspan="3">Empid</td>
<td colspan="3">Name</td>
<td colspan="3">Email ID</td>
<td colspan="3">Nominated and invited</td>
<td colspan="3">Attendance</td>
<td><span class="glyphicon glyphicon-plus"></span></td>
</b></tr>
<?php $sno=0; while ($row = mysqli_fetch_assoc($result))
{?>
<tr>
<td colspan="3" class="table-active"><?php echo $row['emp_code']?></td>
<td colspan="3" class="table-success"><?php echo $row['emp_name']?></td>
<td colspan="3" class="table-info"><?php echo $row['emp_mailid']?></td>
<td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td>
<td colspan="3" class="table-info">
<input type="checkbox" id="attendance" name="attendance[]" data-toggle="toggle" data-on="Yes" data-off="No"></td>
<td><a href='javascript:void(0);' class='disabled'><span class='glyphicon glyphicon-remove'></span></a></td>
<?php }?>
</td>
</tr>
<!-- <tr>
<td colspan="3" class="table-active"><input type="text" name="emp_code[]" class="form-control"></td>
<td colspan="3" class="table-success"><input type="text" name="emp_name[]" class="form-control"></td>
<td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" class="form-control"></td>
<td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td>
<td colspan="3"><input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" class="form-control"></td>
<td><a href='#' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</td>
<input type="hidden" id="count" name="count" value=""/>
</tr>-->
</table>
<!--<script>
$("#attendance").change(function(){
if($(this).prop("checked") == true){
alert("1");
}else{
alert("0");
}
});-->
<div class="form-group">
<div class="col-xs-11 text-center">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
All the code is working fine.I am able to create toggle button inside fetching table. But when i click on adding new row button(+) i get only checkboxes. Any suggestions on this bug?
You need to init bootstrapToggle for newly added element and use class in place of id because can't use same ID for multiple DOM elements:
jQuery(function() {
var counter = 1;
jQuery('a.aaaaa').click(function(event) {
event.preventDefault();
var newRow = jQuery('<tr><td colspan="3" class="table-active"><input type="text" name="emp_code[]" class="form-control"></td><td colspan="3" class="table-success"><input type="text" name="emp_name[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td><td colspan="3"><input type="checkbox" class="toggleone" name="attendance[]" data-toggle="toggle" data-on="Yes" data-off="No"></td><td><span class="glyphicon glyphicon-remove"></span></td></tr>');
counter++;
jQuery('table.table').append(newRow);
//Init bootstrapToggle
$('.toggleone').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
});
});