Table add row, edit row, save row, delete row Using HTML, CSS, JS

Question

I'm doing some test project. I already done some part like add edit or save but I'm stuck with some coding issues. Table add row, Edit Row, Save row, Delete are working fine but when I'm deleting, sr no need to be rearrange like 1, 2, 3, 4. And sometimes table structure also breaking. Can anyone help me??

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

You can loop over each srno to re-order the numbers, just add these lines in your $(".saveAll").click() function :

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>