Javascript追加表行不工作

我花了好几个小时来做这件事。但是我找不到这里出了什么问题，新行没有添加到按钮上，控制台也没有显示错误

目标是为用户提供一个表单，以便在表单中添加一个额外的带有输入字段的表行，或者在添加太多时删除一个表行，这样用户就可以一次放入更多的数据行。我是Javascript/Jquery新手，欢迎所有帮助

表格：

<button type="button" name="addrow" id="addrow" class="example_e">Add New Row</button>

<form class="form-horizontal" action="<?php htmlspecialchars($filterpage); ?>" method="post">
   <table class="testtable">
        <thead>
            <tr>
        <th style="width:0px !important;"></th>
        <th>Account Name</th>
        <th>Emailadress</th>
        <th>Password</th>
        <th>Paying</th>

        <th></th>
         </tr>
        </thead>
    <tbody>
      <tr>
       <td><input type="hidden" style="width:2px !important;" class="form-control sl" name="slno[]" id="slno" value="1" readonly=""></td>
        
        <td><input type="text" style="width:190px !important;font-weight: normal !important;"
         class="form-control" name="name[]" id="acc_name" placeholder="Enter Account Name" required minlength="3" maxlength="150"></td>
         
         <td><input type="email" style="width:210px !important;font-weight: normal !important;"
         class="form-control" name="accmail[]" id="acc_email" placeholder="mail@mail.nl" required minlength="3" maxlength="150"></td>
         
         <td><input type="text" style="width:130px !important;font-weight: normal !important;"
         class="form-control" name="password[]" id="acc_pass" placeholder="Enter Password" required minlength="3" maxlength="50"></td>
        
        
        <td>
        <label class="switch">
        <input type="checkbox" name="betaald[]" id="acc_betaald"  value="Yes" checked/>
        <div class="slider round">
        <span class="on">Yes</span>
        <span class="off">No</span>
        </div>
        </label></td>
        

        <td></td> </tr></tbody></table>
      
  <br/>

  <button type="submit" name="submitnewacc" class="example_e">Add account(s) to database!</button>
</form>

添加新行
查询中的
$（）
函数类似于普通JS中的
document.querySelector（）
函数

在
var newrow=$（'.tbody'）.append（tableRow（i））行上
在“tbody”选择器前放置一个
。这将返回类名为“tbody”的元素，而不是其标记名。要按标记名获取元素，只需删除前导的

因此，将该行更改为
var newrow=$（'tbody'）。append（tableRow（i））
谢谢！就这样，一个小点..：o
<script type="text/javascript">
const tableRow = (i) => {return `
    <tr>
      <td>
        <input type="hidden" class="form-control sl" style="width:2px !important;" name="slno[]" value="${ i }" readonly="">
      </td>
      <td>
        <input type="text" style="width:190px !important;font-weight: normal !important;" 
        class="form-control" name="name[]" id="acc_name${ i }" placeholder="Enter Account Name" 
        required minlength="3" maxlength="150" >
      </td>
      <td><input type="email" style="width:210px !important;font-weight: normal !important;"
         class="form-control" name="accmail[]" id="acc_email${ i }" placeholder="mail@mail.nl" required minlength="3" 
         maxlength="350" ></td>
         
         <td><input type="text" style="width:130px !important;font-weight: normal !important;"
         class="form-control" name="password[]" id="acc_pass${ i }" placeholder="Enter Password" required minlength="3" maxlength="150"></td>
         
        <td>
        <label class="switch">
        <input type="checkbox" name="betaald[]" id="acc_betaald${ i }"  value="Yes" checked/>
        <div class="slider round">
        <span class="on">Yes</span>
        <span class="off">No</span></label></td>
        
       <td><input type="button" class="btnRemove example_b" value="Delete"/></td></tr>
  `
}

$('#addrow').click(function() {
  var length = $('.sl').length;
  var i = parseInt(length) + parseInt(1);
  var newrow = $('.tbody').append(tableRow(i));
  
});

// Removing event here
$('body').on('click', '.btnRemove', function() {
  $(this).closest('tr').parent().remove()
});
    </script>