时间戳

首页 > 解决方案 > Javascript附加表行不起作用

javascript - 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>

剧本：

<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>

标签： javascriptjquery

解决方案

查询中的函数与普通JS中的函数$()类似。document.querySelector()

在“tbody”选择器之前var newrow = $('.tbody').append(tableRow(i)); 放置一个。.这将返回类名为“tbody”的元素，而不是其标签名。为了通过标签名称获取元素，只需删除前导.

所以将该行更改为var newrow = $('tbody').append(tableRow(i));

推荐阅读