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，因此刷新是由于表单提交。

如果它不相关，您需要创建一个再现问题的演示

bootstrap：在选项卡中动态插入一行

1 个答案: