我有this应该执行以下操作的一段代码:
在每个输入字段中输入内容并按下“添加行”按钮后，一个新行应该被添加到表格的末尾。按“删除行”按钮应删除创建的最后一行。
此时，当我按下任何按钮时，它不会执行任何操作。
顺便提一下，当我验证 Chrome 的 控制台是否有任何JS 错误 时，我得到了这个:
Uncaught ReferenceError: $ is not defined
这是 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>
这是 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--;
}
});
});
关于我应该在我的 JS 中更改什么的任何想法？
谢谢
最佳答案
记住 jquery 库必须比 bootstrap 放在第一位，也许那是你的问题，你的代码没问题，这里是使用 jquery 1.11.0 的工作 fiddle
<script src="jquery.min.js">
<script src="bootstrap.min.js">
fiddle [1]:http://jsfiddle.net/gLrhnqo2/
关于javascript - 如何在 Bootstrap 中动态添加行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27411287/