Блог

Главная - Вопросы по программированию - Добавление строки в таблицу, редактирование строки, сохранение строки, удаление строки с помощью HTML, CSS, JS

Добавление строки в таблицу, редактирование строки, сохранение строки, удаление строки с помощью HTML, CSS, JS

#javascript #html #jquery #css #html-table

#javascript #HTML #jquery #css #html-таблица

Вопрос:

Я делаю какой-то тестовый проект. Я уже выполнил какую-то часть, например, добавить редактирование или сохранить, но я застрял с некоторыми проблемами кодирования. Добавление строки таблицы, редактирование строки, сохранение строки, удаление работают нормально, но когда я удаляю, 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>

Ответ №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>