如何使用 jquery 数据表 append 与上述行相同模式的空行

Question

我想使用带有空数据的数据表克隆行并增加序列号。 这是我的代码。

<table id="tabledetail">
    <thead>
      <tr>
         <th>S.#</th>
         <th>Name</th>
         <th>Type</th>
         <th>Action <i class="btn btn-primary fa fa-plus rowAdd"></i></th>
       </tr>
    </thead>
    <tbody>
       <?php $sNo = 1; ?>
       <?php
        if(!empty($recordsDetail))
          {
            foreach($recordsDetail as $detail)
              {
        ?>
       <tr>
          <td><?php echo $sNo; ?></td>
          <td><input type="text" id="name" name="name[]" class="form-control"></td>
          <td>
              <select class="form-control" id="type" name="type[]">
                  <option value="0">No</option>
                  <option value="1">Yes</option>
              </select>
          </td>
          <td><i class="btn btn-primary fa fa-plus rowAdd"></i></td>
       </tr>
       <?php $sNo++ ?>
       <?php
              }
          }
        ?>
    </tbody>
</table>

<script>
    function addTableRow(jQtable) {
      var $row = jQtable.find("tr:last"),
      $clone = $row.clone().appendTo(jQtable);

      $clone.find('[id]').attr('id', function(i, id) {
        return 10 + +id;
      });
      $clone.find('label').remove();
      $clone.find('input').each(function() {

      })
    }

    $('.rowAdd').click(function() {
      //addTableRow($('#tabledetail'));

      var table = $('#tabledetail').DataTable({
        aaSorting: []
      });
      table.row.add([]).draw();
    });

    $(function() {
      $('table').on('click', 'tr a', function(e) {
      e.preventDefault();
      $(this).parents('tr').remove();
      });
    });
</script>

使用 function addTableRow 它的工作，但我需要它与数据表

这是参考链接动态添加行 - append 行从上面

Answer 1

尝试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table id="tabledetail">
    <thead>
      <tr>
         <th>S.#</th>
         <th>Name</th>
         <th>Type</th>
         <th>Action <i class="btn btn-primary fa fa-plus rowAdd"></i></th>
       </tr>
    </thead>
    <tbody>
       <?php $sNo = 1; 
        if(!empty($recordsDetail))
          {
            foreach($recordsDetail as $detail)
              {
        ?>
       <tr>
          <td><?php echo $sNo; ?></td>
          <td><input type="text" id="name" name="name[]" class="form-control"></td>
          <td>
              <select class="form-control" id="type" name="type[]">
                  <option value="0">No</option>
                  <option value="1">Yes</option>
              </select>
          </td>

       </tr>
       <?php $sNo++ ?>
       <?php
              }
          }
        ?>

    </tbody>
    <tfoot>
        <tr>
             <td colspan="3">
            <i class="btn btn-primary fa fa-plus rowAdd"></i>
          </td>
        </tr>
    </tfoot>
</table>

<script>
    $('.rowAdd').click(function() {
        var trLastChild = $("table#tabledetail tbody tr:last-child" );
        var cloneChild = trLastChild.clone();
        var count=parseInt(trLastChild.find('td:first-child').html());
        cloneChild.find("td:first-child").html(count+1);
        $('table#tabledetail tbody').append(cloneChild);
    });
</script>