使用javascript在表中添加行

我有一张表格，上面有详细的主数据。我已经为详细信息创建了一个表，并使用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>

$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
var计数=1；
$（文档）。在（'单击'，'添加行'，函数（）上）{
//警报（“a”）；
计数=计数+1；
$（'#vsdid'）.val（计数）；
//警报（计数）；
var html_代码=“”；
html_代码+=''；
html_代码+=''；
html_代码+=''；
html_代码+=''；
html_代码+=''；
html_代码+=''；
$（'#vattable'）.append（html#U代码）；
//警报（html_代码）；
});
});

您没有添加添加行的按钮，因此您可能观察到了副作用

如果我理解正确，您希望有一个按钮，单击该按钮将执行您创建的功能。因此，您可以在表div下面添加一个id为

addrow

的按钮，如下所示：

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

添加行

---

然后，您可以在开始时通过jQuery附加函数（我稍微修改了您的脚本）-参见JSFIDLE-

您的

#addrow

按钮可能是提交按钮，表单正在提交。添加一个

返回false

，

//警报（html\U代码）

在您的添加行按钮中，单击结尾处的

返回false

， 或者将按钮标签的类型属性设置为

button

，而不是

submit

---

另外，最好将行附加到

tbody

标记not

表

如果您仅在重新加载时遇到问题，则应该放置event.preventDefault（）

$（文档）。在（'click'，'#addrow'，函数（事件）{
event.preventDefault（）；
//警报（“a”）；
计数=计数+1；
$（'#vsdid'）.val（计数）；
//警报（计数）；
var html_代码=“”；
html_代码+=''；
html_代码+=''；
html_代码+=''；
html_代码+=''；
html_代码+=''；
html_代码+=''；
$（'#vattable'）.append（html#U代码）；
//警报（html_代码）；
});

您的

#addrow

按钮可能是提交按钮，表单正在提交中。在

//alert（html\u code）

之后添加一个

return false

，非常感谢，它现在可以工作了。我如何解决它。这是否回答了您的问题？非常感谢它使用两个命令作为第一个应答返回false和第二个应答事件。preventDefault（）；除此之外，我还添加了一个按钮来删除JavaScript添加行中的记录，如下所示。。html_代码+=''；我还编写了另一个JavaScript函数来删除行，但它不能使用$（document）；请记住，这种方法只是一种破解——一种不了解问题、不考虑最佳实践的修复方法。该按钮很可能是一个提交表单按钮，您正在阻止默认操作-提交表单。相反，我认为最好在表单外部创建一个普通按钮，并在其上附加一个onclick add row操作。如果我将类型从“submit”更改为“button”，它就可以工作，而无需添加上述任何一个命令。请查看我关于remove row的另一个评论部分。remove是一个函数，因此您必须执行$（'#row_id'+row_id）.remove（）；但您也可以尝试$（'#vatable'）。删除（'#row_id'+row_id）

 $(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);
    });