如何更改所选行最后一个单元格的innerHTML？

Question

我有两张桌子。当用户单击“添加”按钮时，该行将被添加到另一个表中。在另一个表中，当用户单击“删除”按钮时，该行将被添加到前一个表中。我这部分工作正常。

问题是当它们更改表时我需要更改行的按钮。当一行从“添加”表转到“删除”表时，按钮需要从“添加”传递到“删除”。

这是一张图片，以便您可以更好地理解：

我的代码是这样的：

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

Answer 1

有很多方法可以做到这一点。一种方法是在所有行中都有两个按钮，并使用 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');但是等等，您原来的“点击”事件仍在被触发。为什么？因为即使您交换了类，您也已为每个类附加了一个方法。为了让您的新按钮正常工作，您需要附加这样的方法$("body").on("click", ".agregar", function(event){ ... }$("body").on("click", ".borrar", function(event){ ... }这将告诉代码在每个 .agregar 和 .borrar 元素事件上运行（如果它们是新添加的）。这是一个例子$(document).ready(function() {&nbsp; $("body").on("click", ".agregar", function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var row = $(this).parents('tr');&nbsp; &nbsp; var button = row.find('.btn');&nbsp; &nbsp; button.removeClass('agregar').addClass('borrar');&nbsp; &nbsp; button.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-trash');&nbsp; &nbsp; $('#tablaSala').append(row);&nbsp; });&nbsp; $("body").on("click", ".borrar", function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var row = $(this).parents('tr');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var button = row.find('.btn');&nbsp; &nbsp; button.removeClass('borrar').addClass('agregar');&nbsp; &nbsp; button.find('.glyphicon').removeClass('glyphicon-trash').addClass('glyphicon-plus');&nbsp; &nbsp; $('#tablaDisponibles').append(row);&nbsp; });});table {&nbsp; 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">&nbsp; <tr>&nbsp; &nbsp; <td>Row 1</td>&nbsp; &nbsp; <td><button class="btn agregar"><span class="glyphicon glyphicon-plus"></span></button></td>&nbsp; </tr></table><table id="tablaSala" border="1">&nbsp; <tr>&nbsp; &nbsp; <td>Row 2</td>&nbsp; &nbsp; <td><button class="btn borrar"><span class="glyphicon glyphicon-trash"></span></button></td>&nbsp; </tr></table>