bootstrap：在選項卡中動態插入一行

Question

我嘗試在引導選項卡中插入此腳本。 我的目標是動態地建立一個表格。

我的問題是，每當我插入新行時，我的頁面都會刷新。

你有想法解決這個問題嗎？

<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> 

Answer 1

聽起來像這是在一個窗體內。

將<button>更改爲<button type='button'>以防止它提交表單。

<button>的默認類型是submit，因此刷新將歸因於表單提交。

如果它不是形式相關的，你將需要創建一個演示再現問題