如何更改所选行最后一个单元格的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() {

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