Javascript 如何在 Bootstrap 中动态添加行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27411287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically add row in Bootstrap
提问by martinezjc
I have thispiece of code that should do the following:
我有这段代码应该执行以下操作：
After typing into each input field and pressing the "Add row" button a new rowshould 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 errorsI get this:
顺便提一下，当我验证Chromes 的控制台是否有任何JS 错误时，我得到了这个：
Uncaught ReferenceError: $ is not defined
未捕获的 ReferenceError: $ 未定义
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
谢谢
回答by martinezjc
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 库必须比 bootstrap 放在首位，也许这就是你的问题，你的代码很好，这是使用 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/
回答by Ignacio Laborde
You need add the Jquery script. If you select the latest version works good.
您需要添加 Jquery 脚本。如果选择最新版本效果很好。
