如何在Bootstrap中动态添加行
[英]How to dynamically add row in Bootstrap
问题描述
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: 提一下，当我验证Chrome的控制台中是否存在任何JS错误时 ，都会得到以下提示：
Uncaught ReferenceError: $ is not defined
This is the HTML: 这是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: 这就是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 ? 关于我应该更改JS的任何想法？
Thanks 谢谢
2 个解决方案
解决方案1
8 已采纳 2014-12-10 22:11:16
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 请记住，jQuery库必须放在引导程序之前，否则可能是您的问题，您的代码很好，这是使用jQuery 1.11.0的有效工具。
<script src="jquery.min.js">
<script src="bootstrap.min.js">
The fiddle [1]: http://jsfiddle.net/gLrhnqo2/ 小提琴[1]： http : //jsfiddle.net/gLrhnqo2/
解决方案2
0 2014-12-10 21:52:03
You need add the Jquery script. 您需要添加Jquery脚本。 If you select the latest version works good. 如果选择最新版本，效果很好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.