使用javascript在表格中添加行

Question

我有一个包含主明细数据的表格。我已经为详细信息创建了一个表格，并使用 JavaScript 在按钮单击时创建行，但是一旦我单击添加行按钮，它就会添加行，并且我的页面会立即重新加载，因此添加的行会消失。我有另一个按钮来执行其他 PHP 任务，所以我不能删除表单标签。请帮我完成这件事。 以下是 HTML 和 JavaScript 代码。

<div class="row pt-3">
                <div class="table-responsive">
                  <table id="vattable" class="table table-sm table-striped">
                    <thead class="thead-light">
                      <tr>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDID"); ?></th>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDSCATEGORY"); ?></th>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDRATE"); ?></th>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDAUTOFLAG"); ?></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><input type="text" class="text-control input-sm" readonly name="vsdid[]" id="vsdid" value=1 style="text-align:right" maxlength="13" /></td>
                        <td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory1" style="text-align:right" maxlength="13" /></td>
                        <td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate1" style="text-align:right" maxlength="13" /></td>
                        <td><input type="text" name="vsdautoflag[]" id="vsdautoflag1" style="text-align:right" maxlength="13" autofocus /></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>


<script>
  $(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    var count=1;
    $(document).on('click','#addrow', function(){
      //alert('a');
      count=count+1;
      $('#vsdid').val(count);
      //alert(count);
      var html_code='';
      html_code +='<tr id="row_id_'+count+'">';
      html_code += '<td><input type="text" class="text-control input-sm" name="vsdid[]" id="vsdid'+count+'" style="text-align:right"/></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory'+count+'" /></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate'+count+'" style="text-align:right" maxlength="13" /></td>';
      html_code +='<td><input type="text" name="vsdautoflag[]" id="vsdautoflag'+count+'" style="text-align:right" /></td>';
      html_code +='<td><button type="submit" name="removerow" id="removerow" class="btn btn-danger fa fa-minus"></button></td></tr>';
      $('#vattable').append(html_code);
      //alert(html_code);
    });
  });
</script>

Answer 1

您的#addrow 按钮可能是提交按钮并且正在提交表单。在//alert(html_code) 之后添加return false

Answer 2

您尚未添加按钮来添加行，因此您可能会观察到副作用。

如果我理解正确，您希望有一个按钮，点击后将执行您创建的功能。因此，您可以在表格 div 下方添加一个 ID 为 addrow 的按钮，如下所示：

 <button id="addrow">
    Add Row
 </button>

然后您可以在开始时通过 jQuery 附加您的函数（我稍微修改了您的脚本） - 请参阅 JsFiddle - https://jsfiddle.net/9Ljc237k/9/

Answer 3

在您的添加行按钮中单击您应该在最后return false， 或将按钮标签的类型属性设置为button 而不是submit

最好将行附加到tbody 标签而不是table

Answer 4

如果你只有重新加载的问题，你应该把 event.preventDefault()

 $(document).on('click','#addrow', function(event){
       event.preventDefault();
      //alert('a');
      count=count+1;
      $('#vsdid').val(count);
      //alert(count);
      var html_code='';
      html_code +='<tr id="row_id_'+count+'">';
      html_code += '<td><input type="text" class="text-control input-sm" name="vsdid[]" id="vsdid'+count+'" style="text-align:right"/></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory'+count+'" /></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate'+count+'" style="text-align:right" maxlength="13" /></td>';
      html_code +='<td><input type="text" name="vsdautoflag[]" id="vsdautoflag'+count+'" style="text-align:right" /></td>';
      html_code +='<td><button type="submit" name="removerow" id="removerow" class="btn btn-danger fa fa-minus"></button></td></tr>';
      $('#vattable').append(html_code);
      //alert(html_code);
    });