Добавить и удалить таблицу строк с Jquery - PullRequest
Новая
       2

Добавить и удалить таблицу строк с Jquery

0 голосов
/ 31 марта 2020

Это почти сделано, но я не знаю, почему это не работает так, как должно. Функциональность проста: добавьте строку с помощью щелчка по последней строке и удалите строку с помощью кнопки слева.

Добавление работает нормально, удаление тоже, но при удалении последней строки вы не можете добавь еще раз. Можете ли вы помочь мне, ребята? Это код: 

$(document).ready(function() {

  //Add Button
  $(".fa-plus").click(function() {
    var idTable = $(this).closest('table').attr('id');
    $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');
    //$('#' + idTable + ' tbody>tr:last #name').val('');
    $(this).replaceWith('');
    return false;
  });

  //Delete Butotn
  $(".fa-trash").click(function() {
    var idTable = $(this).closest('table').attr('id');

    var rowCount = $('#' + idTable + ' tr').length;
    if (rowCount > 2) {
      // If is the last Row
      if (!$(this).closest('tr').next().length) {
        $(this).closest("tr").remove();
        $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");
      } else {
        $(this).closest("tr").remove();
      }
    } else {
      alert('Dont delete the only row');
    }


  });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">
  <thead>
    <tr>
      <th style="width:46px;"></th>
      <th></th>
      <th style="width: 35%;"></th>
      <th style="width:46px;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>
      <td><input class="form-control" /></td>
      <td><input class="form-control" /></td>
      <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>
    </tr>

  </tbody>
</table>

1 Ответ

0 голосов
/ 31 марта 2020

Проблема в том, что при удалении строки вы также удаляете обработчик щелчков. Поэтому вместо $(".fa-plus").click(function() {... используйте $('table').on("click", ".fa-plus", function() {.... 

$(document).ready(function() {

  //Add Button
  $('table').on("click", ".fa-plus", function() {
    var idTable = $(this).closest('table').attr('id');
    $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');
    //$('#' + idTable + ' tbody>tr:last #name').val('');
    $(this).replaceWith('');
    return false;
  });

  //Delete Butotn
  $(".fa-trash").click(function() {
    var idTable = $(this).closest('table').attr('id');

    var rowCount = $('#' + idTable + ' tr').length;
    if (rowCount > 2) {
      // If is the last Row
      if (!$(this).closest('tr').next().length) {
        $(this).closest("tr").remove();
        $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");
      } else {
        $(this).closest("tr").remove();
      }
    } else {
      alert('Dont delete the only row');
    }


  });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">
  <thead>
    <tr>
      <th style="width:46px;"></th>
      <th></th>
      <th style="width: 35%;"></th>
      <th style="width:46px;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>
      <td><input class="form-control" /></td>
      <td><input class="form-control" /></td>
      <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>
    </tr>

  </tbody>
</table>
...