表格添加行、編輯行、保存行、刪除行 使用 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>

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>