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

Question

我正在做一些测试项目。我已经完成了一些部分，例如添加编辑或保存，但我遇到了一些编码问题。表格添加行、编辑行、保存行、删除工作正常，但是当我删除时，sr 不需要像 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();
    
  });
});

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

标签： javascripthtmljquerycsshtml-table

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>