jquery动态新增一行tr,实现序号排序

可以按照以下步骤实现：

1. 在table的thead中添加一个新的th元素，用于显示序号。可以设置一个类名或者ID，方便后续操作。

<thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
</thead>

2. 在table的tbody中新增一行tr元素，并在其中添加td元素，第一个td元素用于显示序号。

<tbody>
  <tr>
    <td class="index"></td>
    <td>张三</td>
    <td>20</td>
  </tr>
</tbody>

3. 使用jQuery的each方法遍历所有的行tr，依次给每个序号td元素赋值为当前行的索引值加1。

$('tbody tr').each(function(index) {
  $(this).find('.index').text(index + 1);
});

4. 当需要新增一行tr时，先在tbody中新增一个空白的tr元素，并赋予一个类名或者ID，方便后续操作。

<tbody>
  <tr>
    <td class="index"></td>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr class="new-row">
    <td class="index"></td>
    <td></td>
    <td></td>
  </tr>
</tbody>

5. 在对应的按钮或事件中，使用jQuery的clone方法将新行的HTML结构复制一份，并插入到tbody中新增的空白tr之前。

$('.add-row-btn').click(function() {
  var newRow = $('.new-row').clone();
  $('tbody').append(newRow);
  newRow.removeClass('new-row');
  $('tbody tr').each(function(index) {
    $(this).find('.index').text(index + 1);
  });
});

6. 新增完成后，再次遍历所有行tr，依次给每个序号td元素赋值为当前行的索引值加1。

完整代码如下：

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="index">1</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td class="index">2</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td class="index">3</td>
      <td>王五</td>
      <td>25</td>
    </tr>
    <tr class="new-row">
      <td class="index"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<button class="add-row-btn">新增一行</button>

<script>
  $('tbody tr').each(function(index) {
    $(this).find('.index').text(index + 1);
  });

  $('.add-row-btn').click(function() {
    var newRow = $('.new-row').clone();
    $('tbody').append(newRow);
    newRow.removeClass('new-row');
    $('tbody tr').each(function(index) {
      $(this).find('.index').text(index + 1);
    });
  });
</script>