javascript dynamic mutiple inputs

javascript dynamic mutiple inputs - javascript

why not working this code?
Maybe someone knows?
Table:
$(document).ready(function() {
var postURL = "<?php echo url('invoices/create') ?>";
var i = 1;
// Add inputs
$('#add').click(function() {
i++;
$('#dynamic_field').append('' +
'<tr id="row' + i + '">' +
'<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>' +
'<td><button type="button" name="remove" id="' + i + '" class="btn btn-sm btn-danger btn-remove">X</button></td></tr>');
});
// Remove inputs
$(document).on('click', '.btn-remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$.ajaxSetup({
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>
<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>
<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>
<td><button type="button" name="add" id="add" class="btn btn-sm btn-success">+</button></td>
</tr>
</tbody>
</table>

Related

on clicking button row isn't getting added

In my HTML page I have a dynamic input table, in which when button is clicked another row gets added. I think the JavaScript is fine and everything is fine but after all the row isn't getting added after clicking.
$(document).ready(function() {
var a = 1;
$('#add').click(function() {
a++;
$('#dynamic_pdfield').append('<tr id="row' + a + '"><td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td><td><input type="text" name="pending[]" placeholder="Work Pending" class="form-control name_list" ></td><td><input type="text" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td><td><button type="button" name="remove" id="' + a + '" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
});
<div class="input-field">
<div class="form-group">
<table class="table table-bordered" id="dynamic_pdfield">
<tr>
<th style="display:none;">Report No.</th>
<th>Description</th>
<th>QTY.</th>
<th>Add or Remove</th>
</tr>
<tr>
<td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td>
<td><input type="text" name="pending[]" placeholder="Work Pending" class="form-control name_list"></td>
<td><input type="text" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
</tr>
</table>
<center>
<input type="submit" name="save" id="save" class="btn btn-success">
</center>
</div>
</div>
I could not figure out what I am going wrong on?

Since you didn't reveal explicitly, I have to add not including JQuery library will conclude with an error object on the console with the "message" property "ReferenceError: $ is not defined".
Then if you take a look at the embedded code snippet below, you may see the only thing added to both of the rows are ids that user entered as input params. With the intended ids declared within input fields, and then using via string interpolation inside the append function, it concludes the intended behaviour.
$(document).ready(function() {
var a = 1;
$('#add').click(function() {
a++;
$('#dynamic_pdfield').append(`<tr id="row' + a + '"><td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td><td><input type="text" name="pending[]" placeholder="${desc.value}" class="form-control name_list" ></td><td><input type="text" name="pendingqty[]" placeholder="${qty.value}" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + a + '" class="btn btn-danger btn_remove">X</button></td></tr>`);
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-field">
<div class="form-group">
<table class="table table-bordered" id="dynamic_pdfield">
<tr>
<th style="display:none;">Report No.</th>
<th>Description</th>
<th>QTY.</th>
<th>Add or Remove</th>
</tr>
<tr>
<td style="display:none;"><input type="text" name="preportno[]" value="<?php echo $report ?>"></td>
<td><input type="text" id="desc" name="pending[]" placeholder="Work Pending" class="form-control name_list"></td>
<td><input type="text" id="qty" name="pendingqty[]" placeholder="QTY." class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
</tr>
</table>
<center>
<input type="submit" name="save" id="save" class="btn btn-success">
</center>
</div>
</div>

I have a little problem to confuse, when I click the button to add new table, it's cannot add under the <tr>

I have a little problem to confuse, when I click the button to add new table, it's cannot add under the <tr>
Where has a problem?
this is my code
js.code
function add_agdata_record(o) {
let read_develop_ag = $(o).data("read_develop_ag");
let read_store = $(o).data("read_store");
let read_agaMountPer = $(o).data("id_adread_agaMountPermin");
let read_agMoney1 = $(o).data("read_agMoney1");
let read_agMoney2 = $(o).data("read_agMoney2");
let read_agMoney3 = $(o).data("read_agMoney3");
$(o).parent().parent().append('<tr><td><input type="text" id="develop_ag_new" name="develop_ag_new" value="' + read_develop_ag + '"></td>' +
' <td><input type="text" id="store" name="store" value="' + store + '"></td>' +
' <td><input type="text" id="agaMountPer" name="agaMountPer" value="' + agaMountPer + '"></td>' +
' <td><input type="text" id="agMoney1" name="agMoney1" value="' + agMoney1 + '"></td>' +
' <td><input type="text" id="read_agMoney2" name="read_agMoney2" value="' + agMoney2 + '">' +
' </td><td><input type="text" id="agMoney3" name="agMoney3" value=' + agMoney3 + '""></td></tr>');
}
PHP code
<table width="100%" border="1" id="myTable">
<tr>
<td class="main_t_2 input-group-addon">Real No.</td>
<td colspan="5"><input type="text" id="agaMount" name="agaMount" value="{$read_agaMount}"></td>
</tr>
<tr>
<td class="main_t_2 input-group-addon">AG</td>
<td class="main_t_2 input-group-addon">Store</td>
<td class="main_t_2 input-group-addon">AG%</td>
<td class="main_t_2 input-group-addon">Bonus</td>
<td class="main_t_2 input-group-addon">Money2</td>
<td class="main_t_2 input-group-addon">Money3</td>
</tr>
<tr>
<td><input type="text" id="develop_ag_new" name="develop_ag_new" value="{$read_develop_ag}"></td>
<td><input type="text" id="store" name="store" value="{$read_store}"></td>
<td><input type="text" id="agaMountPer" name="agaMountPer" value="{$read_agaMountPer}"></td>
<td><input type="text" id="agMoney1" name="agMoney1" value="{$read_agMoney1}"></td>
<td><input type="text" id="read_agMoney2" name="read_agMoney2" value="{$read_agMoney2}"></td>
<td><input type="text" id="agMoney3" name="agMoney3" value="{$read_agMoney3}"></td>
</tr>
<tr>
<td><input type="button" value="Add AG" onclick="add_agdata_record(this)"></td>
<td colspan="4" align="right">Update?:</td>
<td><input type="radio" id="upd" name="upd" value="2" checked>
NO
<input type="radio" id="upd" name="upd" value="0">
Update
<input type="radio" id="upd" name="upd" value="1">
Insert
</td>
</tr>
</table>
When I click the add_ag button, it cannot add table under the

like this
$(function(){
$("#add").click(function(){
$('#mt tbody').append('<tr><td><input type="text" id="develop_ag_new[]" name="develop_ag_new[]" value=""></td>'+
'<td><input type="text" id="store[]" name="store[]" value=""></td>'+
'<td><input type="text" id="agaMountPer[]" name="agaMountPer[]" value=""></td>'+
'<td><input type="text" id="agMoney1[]" name="agMoney1[]" value=""></td>'+
'<td><input type="text" id="agMoney2[]" name="agMoney2[]" value=""></td>'+
'<td><input type="text" id="agMoney3[]" name="agMoney3[]" value=""></td></tr>');
tag++;
});
$("#del").click(function(){
$("#mt tbody tr:last").remove();
});
})
html
<tr>
<td><input type="text" id="develop_ag_new" name="develop_ag_new" value="{$v.develop_ag}" disabled="disabled"></td>
<td><input type="text" id="store" name="store" value="{$v.store}" disabled="disabled"></td>
<td><input type="text" id="agaMountPer" name="agaMountPer" value="{$v.agaMountPer}" disabled="disabled"></td>
<td><input type="text" id="agMoney1" name="agMoney1" value="{$v.agMoney1}" disabled="disabled"></td>
<td><input type="text" id="agMoney2" name="agMoney2" value="{$v.agMoney2}" disabled="disabled"></td>
<td><input type="text" id="agMoney3" name="agMoney3" value="{$v.agMoney3}" disabled="disabled"></td>
</tr>

You are defining read_agMoney1 read_agMoney2 and read_agMoney3 but you're assigning agMoney1, agMoney2 and agMoney3. You need to change to a valid variable
function add_agdata_record(o) {
let read_develop_ag = $(o).data("read_develop_ag");
let read_store = $(o).data("read_store");
let read_agaMountPer = $(o).data("id_adread_agaMountPermin");
let read_agMoney1 = $(o).data("read_agMoney1");
let read_agMoney2 = $(o).data("read_agMoney2");
let read_agMoney3 = $(o).data("read_agMoney3");
$(o).parent().parent().append('<tr><td><input type="text" id="develop_ag_new" name="develop_ag_new" value="' + read_develop_ag + '"></td>' +
' <td><input type="text" id="store" name="store" value="' + store + '"></td>' +
' <td><input type="text" id="agaMountPer" name="agaMountPer" value="' + agaMountPer + '"></td>' +
' <td><input type="text" id="agMoney1" name="agMoney1" value="' + read_agMoney1 + '"></td>' +
' <td><input type="text" id="read_agMoney2" name="read_agMoney2" value="' + read_agMoney2 + '">' +
' </td><td><input type="text" id="agMoney3" name="agMoney3" value=' + read_agMoney3 + '""></td></tr>');
}

Checkbox to disable text field on dynamically added rows

I'm working with a checkbox which will disable amount textfield in the incoming added rows if the checkbox is unchecked and will enable the lot_price textfield if check.
IF(checkbox is checked) = Enable lot_price field and disable the incoming amount rows
IF(checkbox is unchecked) = Disable lot_price field and enable the incoming amount rows
Here is the current code
function disable() {
var elements = document.getElementsByClassName("amount");
document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
}
function doIt(elements, status) {
for (var i = 0; i < elements.length; i++) {
elements[i].disabled = status;
}
}
var rowCount = $('#table_body tr').length;
var m;
var month_label;
var check = document.getElementById("state");
if (check.checked) {
} else {
}
$(document).ready(function() {
$("#add_row").click(function(e) {
$('tr').find('input').prop('enabled', true)
$('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control" autocomplete="off"></td>' +
'<td><input type="text" id="stock_no" name="stock_no[' + rowCount + ']" placeholder="Stock No" class="form-control" autocomplete="off"></td>' +
'<td><input type="text" id="unit" name="unit[' + rowCount + ']" placeholder="Unit" class="form-control" autocomplete="off"></td>' +
'<td><textarea name="description[' + rowCount + ']" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>' +
'<td><input type="text" id="quantity' + rowCount + '" name="quantity[' + rowCount + ']" placeholder="Quantity" class="form-control" onkeypress="return isNumberKeyQTY(event)" autocomplete="off">' +
'<td><input type="text" id="unit_cost' + rowCount + '" name="unit_cost[' + rowCount + ']" placeholder="Unit Cost" class="form-control" onkeypress="return isNumberKeyUCOST(event)" autocomplete="off"></td>' +
'<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required></td>'
);
$('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
rowCount++;
});
});
//This will Remove the row
//before the last row then
//changes the id of the last
//row which is hidden
$('#remove_row').click(function() {
var row_count_minus_btn = $('#table_body tr').length - 1
if ($('#table_body tr').length != 2) {
$("#table_body tr:nth-last-child(2)").remove();
$('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
rowCount--;
} else {
swal("Oops...", "Cannot Delete First Row!", "warning");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price" name="lot_price" placeholder="" class="form-control" value="" />
<table id="tab_logic">
<thead>
<tr>
<th style="width: 4%; text-align: center;">Item<br> No.</th>
<th style="width:10%; text-align: center">Stock No.</th>
<th style="width:10%; text-align: center">Unit</th>
<th style="width:36%; text-align: center">Description</th>
<th style="width:10%; text-align: center">Quantity</th>
<th style="width:15%; text-align: center">Unit Cost</th>
<th style="width:15%; text-align: center">Amount</th>
</tr>
</thead>
<tbody id="table_body">
<tr id='addr1'>
<td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off"></td>
<td><input type="text" id="stock_no" name="stock_no[1]" placeholder="Stock No" class="form-control" autocomplete="off"></td>
<td><input type="text" id="unit" name="unit[1]" placeholder="Unit" class="form-control" autocomplete="off"></td>
<td><textarea name="description[1]" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>
<td><input type="text" id="quantity0" name="quantity[1]" placeholder="Quantity" class="form-control" onkeypress='return isNumberKeyQTY(event)' autocomplete="off"></td>
<td><input type="text" id="unit_cost0" name="unit_cost[1]" placeholder="Unit Cost" class="form-control" onkeypress='return isNumberKeyUCOST(event)' autocomplete="off"></td>
<td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
</tr>
<tr id="addr2">
</tbody>
</table>
<button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block">Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block">Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>

Please add some logic to your function
Disable your lot_price on initial
Missing logic to enable/disable lot_price when checkbox was check/uncheck
function disable(){
...
...
// Enable/disable lot_price
}
Missing logic to enable/disable amount textbox when add new row to list
$('#addr' + rowCount).html(
...
+ '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '
+ ( document.getElementById("state").checked?"disabled":"")
+'></td>');
Please run below snippet for test
function disable() {
var elements = document.getElementsByClassName("amount");
document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
// Enable/disable lot_price
document.getElementById("lot_price").disabled = !document.getElementById("state").checked;
}
function doIt(elements, status) {
for (var i = 0; i < elements.length; i++) {
elements[i].disabled = status;
}
}
var rowCount = $('#table_body tr').length;
var m;
var month_label;
var check = document.getElementById("state");
if(check.checked){
}else{
}
$(document).ready(function() {
$("#add_row").click(function(e) {
$('tr').find('input').prop('enabled',true)
$('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control" autocomplete="off"></td>'
+ '<td>...</td>'
+ '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '+( document.getElementById("state").checked?"disabled":"")+'></td>'
);
$('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
rowCount++;
});
});
//This will Remove the row
//before the last row then
//changes the id of the last
//row wich is hidden
$('#remove_row').click(function(){
var row_count_minus_btn = $('#table_body tr').length - 1
if($('#table_body tr').length != 2){
$("#table_body tr:nth-last-child(2)").remove();
$('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
rowCount--;
}else{
console.log("Oops...", "Cannot Delete First Row!", "warning");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price" name="lot_price" placeholder="" class="form-control" value="" disabled/>
<table id="tab_logic">
<thead>
<tr>
<th>Item No.</th>
<th>...</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="table_body">
<tr id='addr1'>
<td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off"> </td><td>...
</td> <td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
</tr>
<tr id="addr2">
</tbody>
</table>
<button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block" >Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block" >Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>

Enable Delete button when row is more than one

Enable "Delete" button in forth col of the table when the row is more than one and Disable when the row is one.
$(document).ready(function() {
var counter = 0;
$("#addrow2").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
newRow.append(cols);
$("#myTable2").append(newRow);
counter++;
});
$("#myTable2").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable2" class="table">
<thead>
<tr>
<th>Full Name</th>
<th>Full Address</th>
<th>Business or Occupation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
</tr>
</tbody>
</table>

You can use prop() to enabled/disabled .. also you can add/removeClass to prevent the click ..and on delete button click you need to check for the length of rows .. see the next code
$(document).ready(function() {
var counter = 0;
$("#addrow2").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="text" class="form-control"></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="Delete"></td>';
newRow.append(cols);
$("#myTable2").append(newRow);
$(".ibtnDel").prop('disabled' , false).removeClass('disabled'); // <<<<<< here
counter++;
});
$("#myTable2").on("click", ".ibtnDel:not(.disabled)", function(event) { // <<<< here ..add :not(.disabled) to prevent the click for .disabled class element
$(this).closest("tr").remove();
counter -= 1;
// >>>>>> here ..check for the row length
if($("#myTable2 tbody tr").length === 1){
$(".ibtnDel").prop('disabled' , true).addClass('disabled');
}
console.log($("#myTable2 tbody tr").length);
});
});
.disabled{
background : red;
color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addrow2">Add Row</button>
<table id="myTable2" class="table">
<thead>
<tr>
<th>Full Name</th>
<th>Full Address</th>
<th>Business or Occupation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="button" class="Del ibtnDel btn btn-md btn-danger" id="DeleteRow1" value="Delete" disabled='disabled'></td>
</tr>
</tbody>
</table>

Cannot add dynamic bootstrap select to table

I'm trying to add a bootstrap-select dynamically in a table defined as follow:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="select0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
Essentially my script create new row to that table when the user press a button.
The problem is that the new bootstrap-select which you can download here, is not added correctly, infact is invisible. I don't know how to fix that, some one could help me?
This is the js code:
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
and this is a working fiddle.

I'm unsure what you meant by $(...).selectpicker() didn't work, because I tested it in your fiddle and it worked just fine. I forked it here https://jsfiddle.net/hpysz5xr/
The code is included below.
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
$('#select'+counter).selectpicker();
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="criteria0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>

We Keep Coding

JavaScript is the programming language of the Web.

javascript dynamic mutiple inputs - javascript

Related

on clicking button row isn't getting added

I have a little problem to confuse, when I click the button to add new table, it's cannot add under the <tr>

Checkbox to disable text field on dynamically added rows

Enable Delete button when row is more than one

Cannot add dynamic bootstrap select to table

Categories

Resources