Question

在这里，我要在删除表中的一行后重置表行号。

html：

<table class="table table-bordered table-center student-map-tbl">
<thead>
    <tr>
        <th>SL.No</th>
        <th>Student Name</th>
        <th>View</th>
        <th>Report</th>
        <th>Delete</th>
    </tr>
</thead>

<tbody>
    <tr>
    <td>1</td><td><input type="hidden" value="25" name="mapped_students[]">AA</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash"></i></span></td>
    </tr>

    <tr>
    <td>2</td>
    <td><input type="hidden" value="26" name="mapped_students[]">BB</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash"></i></span></td>
    </tr>

    <tr>
    <td>3</td>
    <td><input type="hidden" value="27" name="mapped_students[]">CC</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash"></i></span></td>
    </tr>

    <tr>
    <td>4</td>
    <td><input type="hidden" value="28" name="mapped_students[]">DD</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash"></i></span></td>
    </tr>

</tbody>

通过jQuery代码删除表行并重置行号：

$(document).on('click','.student-map-tbl .delete',function(){
    $(this).closest('tr').remove(); 

    $('.student-map-tbl tbody tr').each(function(i){            
        $('.student-map-tbl tbody tr td:first').html(i+1);          
    }); 

    if($('.student-map-tbl tbody tr').length==0){
        $('.student-map-tbl tbody').append('<tr class="empty_result"><td colspan="5">There is no data.</td></tr>');
    }
});

我的输出行号在删除3行之后，将行号重置为3、2、4。

这是怎么回事？

Answer 1

更改脚本

来自

 $('.student-map-tbl tbody tr').each(function(i){            
        $('.student-map-tbl tbody tr td:first').html(i+1);          
    });

这总是访问第一个tr标签的第一个td。

到

  $('.student-map-tbl tbody tr').each(function(i){            
        $($(this).find('td')[0]).html(i+1);          
    });

我们正在使用$（this）访问当前tr及其第一个td。

$(document).on('click','.student-map-tbl .delete',function(){
    $(this).closest('tr').remove(); 

    $('.student-map-tbl tbody tr').each(function(i){            
        $($(this).find('td')[0]).html(i+1);          
    }); 

    if($('.student-map-tbl tbody tr').length==0){
        $('.student-map-tbl tbody').append('<tr class="empty_result"><td colspan="5">There is no data.</td></tr>');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table class="table table-bordered table-center student-map-tbl">
<thead>
    <tr>
        <th>SL.No</th>
        <th>Student Name</th>
        <th>View</th>
        <th>Report</th>
        <th>Delete</th>
    </tr>
</thead>

<tbody>
    <tr>
    <td>1</td><td><input type="hidden" value="25" name="mapped_students[]">AA</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash">delete</i></span></td>
    </tr>

    <tr>
    <td>2</td>
    <td><input type="hidden" value="26" name="mapped_students[]">BB</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
    </tr>

    <tr>
    <td>3</td>
    <td><input type="hidden" value="27" name="mapped_students[]">CC</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash">delete</i></span></td>
    </tr>

    <tr>
    <td>4</td>
    <td><input type="hidden" value="28" name="mapped_students[]">DD</td>
    <td> ----- </td>
    <td> ------ </td>
    <td><span class="delete"><i class="fas fa-trash">delete</i></span></td>
    </tr>

</tbody>

Answer 2

脚本中的这一行

$('.student-map-tbl tbody tr td:first')

每次访问该行的第一个td，您需要访问每行的第一个td。

$(document).on('click', '.student-map-tbl .delete', function() {
  $(this).closest('tr').remove();

  $('.student-map-tbl tbody tr').each(function(i) {
    $(this).find("td:first").html(i + 1);
  });

  if ($('.student-map-tbl tbody tr').length == 0) {
    $('.student-map-tbl tbody').append('<tr class="empty_result"><td colspan="5">There is no data.</td></tr>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-center student-map-tbl">
  <thead>
    <tr>
      <th>SL.No</th>
      <th>Student Name</th>
      <th>View</th>
      <th>Report</th>
      <th>Delete</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td><input type="hidden" value="25" name="mapped_students[]">AA</td>
      <td> ----- </td>
      <td> ------ </td>
      <td><span class="delete"><i class="fas fa-trash">x</i></span></td>
    </tr>

    <tr>
      <td>2</td>
      <td><input type="hidden" value="26" name="mapped_students[]">BB</td>
      <td> ----- </td>
      <td> ------ </td>
      <td><span class="delete"><i class="fas fa-trash">x</i></span></td>
    </tr>

    <tr>
      <td>3</td>
      <td><input type="hidden" value="27" name="mapped_students[]">CC</td>
      <td> ----- </td>
      <td> ------ </td>
      <td><span class="delete"><i class="fas fa-trash">x</i></span></td>
    </tr>

    <tr>
      <td>4</td>
      <td><input type="hidden" value="28" name="mapped_students[]">DD</td>
      <td> ----- </td>
      <td> ------ </td>
      <td><span class="delete"><i class="fas fa-trash">x</i></span></td>
    </tr>

  </tbody>
</table>

在jQuery中删除一行后如何重置表行号？

2 个答案: