表格没有在 jQuery 中动态附加

Question

我已经创建了一个功能，只需单击一个按钮即可帮助我动态插入新 tr，但是当我使用帮助 jquery 重新加载 div 并再次点击添加新 tr 按钮时，它不会附加。 我试图找到问题，我看到tr#row_{num} 计数没有重置并且从最后一次计数开始。 例如 - 如果我附加 3 tr 并重新加载 div 然后，当我再次单击 button 获取新 tr 时，从 4 开始添加它并且不工作/附加。

我使用了table empty(); 函数，但它也不起作用。 请帮助我解决这个问题 -？

$(document).on("click", "button#add_row", function() {
  var table = $("#myTable");
  var count_table_tbody_tr = $("#myTable tbody tr").length;
  var row_id = count_table_tbody_tr + 1;
  
  var html = '<tr id="row_' + row_id + '">';
  html += '<td><input type="text" class="form-control ui-form-input firstname" autocomplete="off"></td>' + '<td> <input type="text" class="form-control ui-form-input lastname" autocomplete="off"></td><td></td></tr>';
  
  if (count_table_tbody_tr >= 1) {
    $("table#myTable tbody tr:first").before(html);
  } else {
    $("table#myTable tbody").html(html);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" id="myTable" style="overflow-y: auto;">
  <thead>
    <tr>
      <th style="text-align: center; vertical-align: middle;">First Name</th>
      <th style="text-align: center; vertical-align: middle;">Last Name</th>
      <th style="width: 5%;">
        <button type="button" id="add_row" class="btn btn-default">Add ROW</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr id="row_1">
      <td>
        <input type="text" class="form-control ui-form-input firstname" autocomplete="off">
      </td>
      <td>
        <input type="text" class="form-control ui-form-input lastname" autocomplete="off">
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

我的现场工作 JsFddle 在这里 JSFIDDLE

Answer 1

你的代码可以简化成这样

注意我把 ID 移到了 tbody

$(function() {
  const $table = $("#myTable");
  const $row = $("#row_1");
  $("#add_row").on("click", function() {
    $table.append(
      $row
        .clone()
        .attr("id",`row_${$table.find("tr").length+1}`)
    )
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" style="overflow-y: auto;">
  <thead>
    <tr>
      <th style="text-align: center; vertical-align: middle;">First Name</th>
      <th style="text-align: center; vertical-align: middle;">Last Name</th>
      <th style="width: 5%;">
        <button type="button" id="add_row" class="btn btn-default">Add ROW</button>
      </th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr id="row_1">
      <td>
        <input type="text" class="form-control ui-form-input firstname" autocomplete="off">
      </td>
      <td>
        <input type="text" class="form-control ui-form-input lastname" autocomplete="off">
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

如果表是动态的，则需要

$(function() {
  $(document).on("click","#add_row", function() {
    const $table = $("#myTable");
    const $row = $("#row_1");
    $table.append(
      $row
        .clone()
        .attr("id",`row_${$table.find("tr").length+1}`)
    )
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table class="table table-bordered" style="overflow-y: auto;">
  <thead>
    <tr>
      <th style="text-align: center; vertical-align: middle;">First Name</th>
      <th style="text-align: center; vertical-align: middle;">Last Name</th>
      <th style="width: 5%;">
        <button type="button" id="add_row" class="btn btn-default">Add ROW</button>
      </th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr id="row_1">
      <td>
        <input type="text" class="form-control ui-form-input firstname" autocomplete="off">
      </td>
      <td>
        <input type="text" class="form-control ui-form-input lastname" autocomplete="off">
      </td>
      <td></td>
    </tr>
  </tbody>
</table>