表格添加行、编辑行、保存行、删除行使用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() {

    $(this).text(srno+1);

    srno++;

});

$(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);

    var srno = 0;

    $(".srno").each(function() {

      $(this).text(srno + 1);

      srno++;

    });

    $("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();

  });

});

.addRow {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}

.editAll {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}

.saveAll {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}

.delete {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}

.fulltable {

  width: 100%;

  border: 1px solid #000;

  text-align: left;

  clear: both;

  margin: 30px 0 0;

}

.fulltable th {

  border: 1px solid #000;

  padding: 10px;

}

.fulltable th:first-child {

  width: 50px;

  display: none;

  text-align: center;

}

.fulltable th:nth-child(2) {

  width: 100px;

  text-align: center;

}

.fulltable td {

  border: 1px solid #000;

}

.fulltable td:first-child {

  width: 50px;

  display: none;

  text-align: center;

}

.fulltable td:nth-child(2) {

  text-align: center;

}

.fulltable td input {

  width: 100%;

  padding: 10px;

  border: 0;

  box-sizing: border-box;

  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">

  <tr>

    <th>Delete</th>

    <th>Sr No.</th>

    <th>Name</th>

    <th>Id</th>

    <th>Description</th>

  </tr>

  <tr>

    <td class="deleterow">X</td>

    <td class="srno">1</td>

    <td class="name"><input type="text"></td>

    <td class="id"><input type="text"></td>

    <td><input class="description" type="text"></td>

  </tr>

</table>