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
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
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Dec 10, 2014 at 21:37 user4312749user4312749 4- 1 Are you sure you are loading jQuery script? – Christian Benseler Commented Dec 10, 2014 at 21:38
- Well, correct me if I'm wrong. I think so. I've included bootstrap.min.js + jquerry + my script. – user4312749 Commented Dec 10, 2014 at 21:45
- 1 Probably this is any simple mistake when loading the scripts. I put your code at a fiddle and it's ok: jsfiddle/chrisbenseler/bzy95wL3/2 take a look at your browser's debug tool and check the http requests and error console. – Christian Benseler Commented Dec 10, 2014 at 21:51
- 1 I've got thru it. I've received that error due to the fact that i've included my script before jquery and bootstrap. Now it works flawlessly. thank you Chriss & Nacho – user4312749 Commented Dec 10, 2014 at 21:57
2 Answers
Reset to default 9Remember 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/gLrhnqo2/
You need add the Jquery script. If you select the latest version works good.