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

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