使用HTML表中的JavaScript/JQuery克隆方法制作计数器

Question

我需要使用JavaScript/JQuery制作一个计数器，在第二列中使用克隆方法，比如第一行，当我单击add按钮时，它会自动显示数字2。我在JavaScript/JQuery中使用了克隆方法，我不知道如何添加这个方法。这是我的完整代码：

​

var cloned = $('#myTable tr:last').clone();
$(".add-row").click(function(e) {
  e.preventDefault();
  cloned.clone().appendTo('#myTable');
});

$('#myTable').on('click', ".delete-row", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
});

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
  <thead>
    <th></th>
    <th>#</th>
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <th>test4</th>
    <th>test5</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#" class="btn btn-sm btn-danger delete-row">delete</a>
      </td>
      <td>
      <!-- Counter here -->
      </td>
    </tr>
  </tbody>
</table>
<a href="#" class="btn btn-sm btn-primary add-row">add</a>

​

Answer 1

请考虑以下几点。

​

$(function() {
  function cloneLastRow(table) {
    var row = $("tr:last", table);
    var clone = row.clone();
    $("td:eq(1)", clone).html($("tbody tr", table).length + 1);
    clone.appendTo($("tbody", table));
  }

  function renumberTable(table) {
    var count = 1;
    $("tbody tr", table).each(function(i, row) {
      $("td:eq(1)", row).html(count++);
    });
  }

  $(".add-row").click(function() {
    cloneLastRow($("#myTable"));
  });

  $("#myTable tbody").on("click", ".delete-row", function() {
    var row = $(this).closest("tr");
    if (confirm("Are you sure you want to delete the Row?")) {
      row.fadeOut("slow", function() {
        row.remove();
        renumberTable($("#myTable"));
      });
    }
  })
});

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-striped table-sm" id="myTable">
  <thead>
    <th>&nbsp;</th>
    <th>#</th>
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <th>test4</th>
    <th>test5</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#" class="btn btn-sm btn-danger delete-row">delete</a>
      </td>
      <td>
        1
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<a href="#" class="btn btn-sm btn-primary add-row">add</a>

​

当您只需要请求选择器的当前length时，就不需要计数器了。例如，您可以获得表主体中所有行的length。最初，那是1。下一个将是2。

现在，如果表有一个唯一的开始，比如20，那么您将希望获得该字符串值，将其转换为一个整数，并增加该值。

$("td:eq(1)", clone).html(parseInt($("td:eq(1)", row).text()) + 1);

这将导致21。

更新

根据您的注释，删除一行时，希望数字保持连续。这意味着您需要重新绘制所有或至少所有进一步的数字。

function renumberTable(table){
  var count = 1;
  $("tbody tr", table).each(function(i, row){
    $("td:eq(1)", row).html(count++);
  });
}

然后，在删除Row之后直接运行这个函数。