我尝试将此脚本插入 Bootstrap 选项卡中。 我的目标是动态构建一个表。
我的问题，每次插入新行时，我的页面都会刷新。
你有办法解决这个问题吗？
<table class="table table-sm table-hover" id="mtable">
<thead>
<tr>
<td>Item</td>
<td>Red</td>
<td>Green</td>
</tr>
</thead>
<tbody>
<tr>
<td>Some Item</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</tbody>
</table><br /><br />
<input id="row" placeholder="Enter Item Name" />
<button id="irow">Insert Row</button><br /><br />
<input id="col" placeholder="Enter Heading" />
<button id="icol">Insert Column</button>
<script>
$('#irow').click(function(){
if($('#row').val()){
$('#mtable tbody').append($("#mtable tbody tr:last").clone());
$('#mtable tbody tr:last :checkbox').attr('checked',false);
$('#mtable tbody tr:last td:first').html($('#row').val());
}else{alert('Enter Text');}
});
$('#icol').click(function(){
if($('#col').val()){
$('#mtable tr').append($("<td>"));
$('#mtable thead tr>td:last').html($('#col').val());
$('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
}else{alert('Enter Text');}
});
</script>
最佳答案
听起来这是在表单内。
更改<button>至<button type='button'>以防止它提交表单。
<button> 的默认类型是 submit所以刷新是由于表单提交造成的。
如果它与表单无关，您将需要创建一个重现问题的演示
关于javascript - Bootstrap : insert dynamically a row in tab，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39735319/