表格添加行、编辑行、保存行、删除行使用HTML、CSS、JS

Question

我正在做一些测试项目。我已经完成了一些部分，比如添加编辑或保存，但我遇到了一些编码问题。表添加行、编辑行、保存行、删除工作正常，但当我删除时，不需要像 1、2、3、4 那样重新排列。有时表结构也会中断。谁能帮我？？

$(document).ready(function(){

  $(".addRow").click(function(){

    var trCount = $("tr").length;

    

    if($(".deleterow").is(':visible')){

      $("table").append("<tr><td class='deleterow' style='display: table-cell;'>X</td><td class='srno'>"+ trCount  +"</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");

    } else {

      $("table").append("<tr><td class='deleterow'>X</td><td class='srno'>"+ trCount  +"</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");

    }

  }); 

  $(".editAll").click(function(){

    $("input").attr("readonly", false);

  });

  $(".saveAll").click(function(){

    $("input").attr("readonly", true);

    $("th:first-child").hide();

    $("td:first-child").hide();

  });

  $(".delete").click(function(){

    $("th:first-child").show();

    $("td:first-child").show();

  });

  $(document).find("table").on('click','.deleterow', function(){

   

   $(this).parent("tr").remove();

   var totalLength = $("tr").length;             

   $("table").find("tr:nth-child(2)").children("td.srno").html();

    

  });

});

Answer 1

您可以遍历每个srno以重新排序数字，只需在您的$(".saveAll").click()函数中添加这些行：var srno = 0;$(".srno").each(function() {&nbsp; &nbsp; $(this).text(srno+1);&nbsp; &nbsp; srno++;});$(document).ready(function() {&nbsp; $(".addRow").click(function() {&nbsp; &nbsp; var trCount = $("tr").length;&nbsp; &nbsp; if ($(".deleterow").is(':visible')) {&nbsp; &nbsp; &nbsp; $("table").append("<tr><td class='deleterow' style='display: table-cell;'>X</td><td class='srno'>" + trCount + "</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $("table").append("<tr><td class='deleterow'>X</td><td class='srno'>" + trCount + "</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");&nbsp; &nbsp; }&nbsp; });&nbsp; $(".editAll").click(function() {&nbsp; &nbsp; $("input").attr("readonly", false);&nbsp; });&nbsp; $(".saveAll").click(function() {&nbsp; &nbsp; $("input").attr("readonly", true);&nbsp; &nbsp; var srno = 0;&nbsp; &nbsp; $(".srno").each(function() {&nbsp; &nbsp; &nbsp; $(this).text(srno + 1);&nbsp; &nbsp; &nbsp; srno++;&nbsp; &nbsp; });&nbsp; &nbsp; $("th:first-child").hide();&nbsp; &nbsp; $("td:first-child").hide();&nbsp; });&nbsp; $(".delete").click(function() {&nbsp; &nbsp; $("th:first-child").show();&nbsp; &nbsp; $("td:first-child").show();&nbsp; });&nbsp; $(document).find("table").on('click', '.deleterow', function() {&nbsp; &nbsp; $(this).parent("tr").remove();&nbsp; &nbsp; var totalLength = $("tr").length;&nbsp; &nbsp; $("table").find("tr:nth-child(2)").children("td.srno").html();&nbsp; });});.addRow {&nbsp; border: 1px solid #000;&nbsp; padding: 6px 10px;&nbsp; text-decoration: none;&nbsp; color: #000;&nbsp; display: inlne-block;}.editAll {&nbsp; border: 1px solid #000;&nbsp; padding: 6px 10px;&nbsp; text-decoration: none;&nbsp; color: #000;&nbsp; display: inlne-block;}.saveAll {&nbsp; border: 1px solid #000;&nbsp; padding: 6px 10px;&nbsp; text-decoration: none;&nbsp; color: #000;&nbsp; display: inlne-block;}.delete {&nbsp; border: 1px solid #000;&nbsp; padding: 6px 10px;&nbsp; text-decoration: none;&nbsp; color: #000;&nbsp; display: inlne-block;}.fulltable {&nbsp; width: 100%;&nbsp; border: 1px solid #000;&nbsp; text-align: left;&nbsp; clear: both;&nbsp; margin: 30px 0 0;}.fulltable th {&nbsp; border: 1px solid #000;&nbsp; padding: 10px;}.fulltable th:first-child {&nbsp; width: 50px;&nbsp; display: none;&nbsp; text-align: center;}.fulltable th:nth-child(2) {&nbsp; width: 100px;&nbsp; text-align: center;}.fulltable td {&nbsp; border: 1px solid #000;}.fulltable td:first-child {&nbsp; width: 50px;&nbsp; display: none;&nbsp; text-align: center;}.fulltable td:nth-child(2) {&nbsp; text-align: center;}.fulltable td input {&nbsp; width: 100%;&nbsp; padding: 10px;&nbsp; border: 0;&nbsp; box-sizing: border-box;&nbsp; outline: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><a class="addRow" href="#">Add Row</a><a class="editAll" href="#">Edit All</a><a class="saveAll" href="#">Save All</a><a class="delete" href="#">Delete</a><table cellspacing="0" class="fulltable">&nbsp; <tr>&nbsp; &nbsp; <th>Delete</th>&nbsp; &nbsp; <th>Sr No.</th>&nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; <th>Id</th>&nbsp; &nbsp; <th>Description</th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td class="deleterow">X</td>&nbsp; &nbsp; <td class="srno">1</td>&nbsp; &nbsp; <td class="name"><input type="text"></td>&nbsp; &nbsp; <td class="id"><input type="text"></td>&nbsp; &nbsp; <td><input class="description" type="text"></td>&nbsp; </tr></table>