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です。したがって、リフレッシュはフォームの送信によるものです。

フォームに関連していない場合は、問題を再現するデモを作成する必要があります