Как изменить внутреннюю HTML последней ячейки выбранной строки? - PullRequest
Новая
       12

Как изменить внутреннюю HTML последней ячейки выбранной строки?

1 голос
/ 02 апреля 2020

У меня есть две таблицы. Когда пользователь нажимает кнопку «Добавить», эта строка будет добавлена ​​в другую таблицу. А в другой таблице, когда пользователь нажимает кнопку «удалить», эта строка будет добавлена ​​в предыдущую таблицу. У меня эта часть работает нормально.

Проблема в том, что мне нужно изменить кнопку строк, когда они меняют таблицы. Когда строка переходит из таблицы «добавить» в таблицу «удалить», кнопка должна перейти от «добавить» к «удалить».

Вот изображение, чтобы вы могли лучше понять:

enter image description here

У меня есть следующий код: 

$(document).ready(function(){

    $(".agregar").on("click", function(event){
        event.preventDefault();

        var row = $(this).parents('tr');

        //$(this).parents('tr').find('td:last-child').val();

        $('#tablaSala').append(row);
    });

   $(".borrar").on("click", function(event){
        event.preventDefault();

        var row = $(this).parents('tr');

        $('#tablaDisponibles').append(row);
    });
});

Мне нужно отредактировать эту последнюю ячейку перед тем, как поместить строку в другую таблицу.

Это будет код кнопок 

//add button
<button class="btn agregar"><span class="glyphicon glyphicon-plus"></span></button>

//delete button
<button class="btn borrar"><span class="glyphicon glyphicon-trash"></span></button>

1 Ответ

0 голосов
/ 02 апреля 2020

Есть много способов сделать это.

Одним из способов было бы иметь обе кнопки во всех строках и скрыть одну или другую с помощью CSS.

Например: 

.table_1 .borrar { display:none; }
.table_2 .agregar { display:none; }

В зависимости от информации, вы можете не захотеть, чтобы люди открывали инспектор, показывали кнопку и нажимали на нее. Ничего страшного, но, как я уже сказал, это зависит от того, что вы с ним делаете.

Если вы хотите закодировать его, вам нужно изменить кнопку перед добавлением.

Что-то вроде этого 

var row = $(this).closest('tr');
var button = row.find('.btn');
button.removeClass('agregar').addClass('borrar');
button.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-trash');

Но подождите, ваши исходные события "click" все еще запускаются. Почему? Потому что вы прикрепили метод к каждому из них, даже если вы меняете класс.

Чтобы новые кнопки работали, вам необходимо прикрепить методы, подобные этому 

$("body").on("click", ".agregar", function(event){ ... }
$("body").on("click", ".borrar", function(event){ ... }

Это сообщит коду запускаться для каждого события элемента .agregar и .borrar, если они были добавлены.

Вот пример 

$(document).ready(function() {

  $("body").on("click", ".agregar", function(event) {
    event.preventDefault();

    var row = $(this).parents('tr');

    var button = row.find('.btn');
    button.removeClass('agregar').addClass('borrar');
    button.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-trash');

    $('#tablaSala').append(row);
  });

  $("body").on("click", ".borrar", function(event) {
    event.preventDefault();

    var row = $(this).parents('tr');
    
    var button = row.find('.btn');
    button.removeClass('borrar').addClass('agregar');
    button.find('.glyphicon').removeClass('glyphicon-trash').addClass('glyphicon-plus');

    $('#tablaDisponibles').append(row);
  });
});
table {
  margin-bottom: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tablaDisponibles" border="1">
  <tr>
    <td>Row 1</td>
    <td><button class="btn agregar"><span class="glyphicon glyphicon-plus"></span></button></td>
  </tr>
</table>

<table id="tablaSala" border="1">
  <tr>
    <td>Row 2</td>
    <td><button class="btn borrar"><span class="glyphicon glyphicon-trash"></span></button></td>
  </tr>
</table>
...