I want to create a dynamic table. This code was working fine for me until I had Text box instead of this combo box in "Recruitment stage " column
I have used help of this code snippet http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion
So my problem is I can't add rows after changing above mentioned code snippet into below code.
So please some one tell me why this isn't working?
This is screenshot of my table https://scontent-b-sin.xx.fbcdn.net/hphotos-xap1/v/l/t1.0-9/p118x118/1920631_767832533264997_3927859617455363653_n.jpg?oh=11445485fb638f37534179b6ed2eaaf4&oe=5509770D
Quick reply would be appreciated
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td>
<select name='course"+i+"' class='form-control'>
<option value=''>Select</option>
<option value='1'>Telephonic Interview</option>
<option value='2'>Skype Interview</option>
<option value='3'>Personal Interview</option>
</select>
</td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Recruitment Stage
</th>
<th class="text-center">
Remark
</th>
<th class="text-center">
Comments
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select name="course0" class="form-control">
<option value="">Select</option>
<option value="1">Telephonic Interview</option>
<option value="2">Skype Interview</option>
<option value="3">Personal Interview</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
If you have multiple lines for a single statement in javascript you should use " at the end of each line and + " at the beginning of the next line (or vice versa). This is called concatenation
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td>"
+"<select name='course"+i+"' class='form-control'>"
+"<option value=''>Select</option>"
+"<option value='1'>Telephonic Interview</option>"
+"<option value='2'>Skype Interview</option>"
+"<option value='3'>Personal Interview</option>"
+"</select>"
+"</td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
#add_row, #delete_row
{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Recruitment Stage
</th>
<th class="text-center">
Remark
</th>
<th class="text-center">
Comments
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select name="course0" class="form-control">
<option value="">Select</option>
<option value="1">Telephonic Interview</option>
<option value="2">Skype Interview</option>
<option value="3">Personal Interview</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
Related
I created dynamic table and i want to show the selected dropdown values in textbox, i tried many ways using javascripts and jQuery but its not working in my dynamic table..
I just want to pass the values in my text box
Can you help me please?
Note: Pass the values only table dropdown..
here is my detailed Fiddle
Fiddle
Jquery code for creating dynamic table
$(document).ready(function() {
$("#cashacc_sel").html($('#cashacc').html());
var i = 1;
$("#add_row").click(function() {
var oSelectedValue = $('#cashacc').val();
$('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Choose an items</option></select></td>");
// {/* <td>" + (i + 1) + "</td> */}
$("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
// $('#cashacc_sel').append($('#dynamic_sel').html());
$("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)'));
$("#cashacc").html($('#cashacc_sel').html());
$("#cashacc").val(oSelectedValue);
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 20px;">
<label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
<select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an items</option>
<option value="acc1">Account 1</option>
<option value="acc2">Account 2</option>
<option value="acc3">Account 3</option>
</select>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
</tr>
</thead>
<tbody>
<a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
<tr id='addr0'>
<td>
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
</td>
<td>
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Select A/c name</option>
<option value="1">Plumz</option>
<option value="2">Plumz 2</option>
<option value="3">Plumz 3</option>
</select>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
</div>
I think you need something like this.
$(document).ready(function() {
$("#cashacc_sel").html($('#cashacc').html());
var i = 1;
$("#add_row").click(function() {
var oSelectedValue = $('#cashacc').val();
$('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='sel_text form-control input-md'/></td><td><select class='sel_sel cashacc_sel form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Choose an items</option></select></td>");
// {/* <td>" + (i + 1) + "</td> */}
$("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
// $('#cashacc_sel').append($('#dynamic_sel').html());
$("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)'));
$("#cashacc").html($('#cashacc_sel').html());
$("#cashacc").val(oSelectedValue);
bindScript();
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
bindScript();
});
function bindScript() {
$(document).find('.sel_sel').on("change", function () {
$(this).parent().parent().find('.sel_text').val($(this).val());
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 20px;">
<label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
<select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an items</option>
<option value="acc1">Account 1</option>
<option value="acc2">Account 2</option>
<option value="acc3">Account 3</option>
</select>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
</tr>
</thead>
<tbody>
<a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
<tr id='addr0'>
<td>
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control sel_text" />
</td>
<td>
<select class="form-control sel_sel" name="cashacc_sel" id="cashacc_sel">
<option value="">Select A/c name</option>
<option value="1">Plumz</option>
<option value="2">Plumz 2</option>
<option value="3">Plumz 3</option>
</select>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
</div>
You need to use clone and not IDs
$(function() { // on page load
$("#add_row").on("click",function() { // on click of add
$("tbody").append($("tbody tr").first().clone()); // clone and append
$("tbody tr").last().find("select").val($("#cashacc").val()); // set the value
});
$("#delete_row").on("click",function() {
if ($("tbody tr").length > 1) { // remove last entry if more than one
$("tbody tr").last().remove()
}
});
// copy the value from select to input field
$("tbody").on("change","[name=cashacc_sel]",function() {
$(this).closest("tr").find("[name=cashacc_code]").val(this.value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 20px;">
<label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
<select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an item</option>
<option value="acc1">Account 1</option>
<option value="acc2">Account 2</option>
<option value="acc3">Account 3</option>
</select>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<td><a id="add_row" class="btn btn-default pull-left adRow">Add Row</a></td>
<td><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a></td>
</tr>
<tr style="background-color: #680779; color: #fff;">
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
</td>
<td>
<select class="form-control" name="cashacc_sel">
<option value="">Select A/c name</option>
<option value="acc1">Plumz</option>
<option value="acc2">Plumz 2</option>
<option value="acc3">Plumz 3</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
i am using jquery plugin bootstrap select
my code
$('.selectpicker').on('hidden.bs.select', function (e) {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4,
liveSearch: true
});
});
refreshing in code
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='selectpicker'
data-'live-search=true' name='name"+i+"'><option>Mustard</option>
<option>Ketchup</option><option>Relish</option></select> </td><td><input
name='mail"+i+"' type='text' placeholder='Mail' class='form-control
input-md'>
</td><td><input name='mobile"+i+"' type='text' placeholder='Mobile'
class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
$('.selectpicker').selectpicker('refresh');
i++;
});
but after refreshing i am not getting
data-live-search="true" class added in newly refreshed dropdown.
any suggestion?
I need data-live-search="true" in every dropdown after fresh command in this
plugin.
my html
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select class="selectpicker" data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail'
class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile'
class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a
id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
You have
data-'live-search=true'
it should be
data-live-search='true'
$('.selectpicker').on('hidden.bs.select', function(e) {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4,
liveSearch: true
});
});
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#tab_logic').append('<tr id="addr' + i + '"></tr>');
$('#addr' + i).html("<td>" + i + "</td><td><select class='selectpicker' data-live-search='true' name = 'name" + i + "'><option >Mustard</option><option>Ketchup</option><option>Relish</option></select></td><td><input name='mail" + i + "'type='text'placeholder='Mail' class= 'form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'/></td>");
$('.selectpicker').selectpicker('refresh');
i++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="tab_logic">
</table>
<button id="add_row">Add Table Row</button>
this is a sample bootstrap dynamic table :
I want to access the data in the table
HTML
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<p id="qoz">s</p>
JavaScript
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
how can I access the data in the table?
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
$('#Get_row_data').click(function(){
$('[id^=addr]').each(function(){
var id = $(this).attr('id');
$('#'+id +' td input').each(function(){
console.log($(this).val());
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
<a id='Get_row_data' class="pull-right btn btn-default">Get Row Data</a>
Hello Please check this code This might help you out in solving your purpose.
What i did is i have added a new button to get the data from row.
I used wildCard Id of Row and fetch the value of input boxes.
Thanks
To display data , kindly See bellow code (I've added show data button click )
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
var numTr = $("#tab_logic tbody tr").length;
$('#tab_logic').append("<tr id='addr"+(numTr)+"'><td>"+ (numTr+1) +"</td><td><input name='name"+numTr+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+numTr+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+numTr+"' type='text' placeholder='Mobile' class='form-control input-md'></td></tr>");
});
$("#delete_row").click(function(){
var notr = $("#tab_logic tbody tr").length
if(notr>1){
$("#addr"+(notr-1)).remove();
}
});
$("#show_data").click(function(){
var htmlString="";
$("#tab_logic tbody tr").each(function(index,el){
if(index<$("#tab_logic tbody tr").length) {
var name = $("[name='name"+index+"']").val();
var mail = $("[name='mail"+index+"']").val();
var mobile = $("[name='mobile"+index+"']").val();
console.log("Row "+index+" : [Name="+name+"] - [Mail="+mail +"] - [Mobile="+mobile+"]");
htmlString += showDataHtml(index,name,mail,mobile)
}
$("#data-row").html(htmlString);
});
});
});
function showDataHtml(index,name,mail,mobile) {
index++;
return "<div class='col-md-12'>Row "+index+" : Name = "+name+" - Mail = "+mail+" - Mobile = "+mobile+"</div>"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet"/>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<div class="row">
<a id='show_data' class=" btn btn-default">SHow Data</a>
</div>
<div class="container">
<div id="data-row" class="row clearfix">
<div>
</div>
I want to add a new bootstrap row with one click, I tried this, but I only get a new row with number, not the copy of a complete row:
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Comment
</th>
<th class="text-center">
Price
</th>
<th class="text-center">
Type
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
<td>
<br>
<div class="smart-widget sm-right ">
<label for="cop" class="field prepend-icon required-field">
Price
<input type="text" name="cop" id="cop" class="gui-input">
</label>
</div>
</td>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<label for="client" class="control-label"> Type</label>
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
Script:
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td>")
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
Why only add new row with number of row instead of row with two dropdowns and one field?
Thanks in advance!
Simply because that what you have passed in "<td>"+ (i+1) +"</td>".
You could add the content of default row #addr0 in every row you add :
$('#addr'+i).html($('#addr0').html());
Hope this helps.
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html($('#addr0').html());
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Comment
</th>
<th class="text-center">
Price
</th>
<th class="text-center">
Type
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
<td>
<br>
<div class="smart-widget sm-right ">
<label for="cop" class="field prepend-icon required-field">
Price
<input type="text" name="cop" id="cop" class="gui-input">
</label>
</div>
</td>
<td>
<div class="smart-widget sm-right ">
<label for="client" class="field prepend-icon required-field">
<label for="client" class="control-label"> Type</label>
<select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
</label>
</div>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
You have to get previous HTML code into new row.
<script>
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
lastobj = "#addr"+""+(i-1);
content = $(lastobj).html();
$('#addr'+i).html(content);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>
Also use ID to get their value or using an arrays.
I have this piece of code that should do the following:
After typing into each input field and pressing the "Add row" button a new row should be added to the end of the table. Pressing the "Delete row" button should remove the last row created.
At this point, when I press any of the buttons, it won't do anything.
As a mention, when I am verifying Chromes' Console for any JS errors I get this:
Uncaught ReferenceError: $ is not defined
This is the HTML:
<body style="background-color:lavender">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
User
</th>
<th class="text-center">
Password
</th>
<th class="text-center">
IP
</th>
<th class="text-center">
Country
</th>
<th class="text-center">
IP disponibility
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='user0' placeholder='User' class="form-control"/>
</td>
<td>
<input type="text" name='pass0' placeholder='Password' class="form-control"/>
</td>
<td>
<input type="text" name='ip0' placeholder='IP' class="form-control"/>
</td>
<td>
<input type="text" name='country0' placeholder='Country' class="form-control"/>
</td>
<td>
<input type="text" name='ipDisp0' placeholder='IP Details' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
And this is the JS:
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='user"+i+"' type='text' placeholder='User' class='form-control input-md' /></td><td><input name='pass"+i+"' type='text' placeholder='Password' class='form-control input-md'></td><td><input name='ip"+i+"' type='text' placeholder='IP' class='form-control input-md'></td><td><input name='country"+i+"' type='text' placeholder='Country' class='form-control input-md'></td><td><input name='ipDisp"+i+"' type='text' placeholder='IP details' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
Any ideas on what should I change in my JS ?
Thanks
Remember jquery library must be placed first than bootstrap, maybe that would be your problem, your code is fine, here is the working fiddle using jquery 1.11.0
<script src="jquery.min.js">
<script src="bootstrap.min.js">
The fiddle [1]: http://jsfiddle.net/gLrhnqo2/
You need add the Jquery script. If you select the latest version works good.