CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Rachel Basulto
Rachel Basulto

Reputation: 35

How to change innerHTML of the last cell of a selected row?

I have two tables. When the user clicks on the "add" button, that row will be added to the other table. And in the other table, when the user clicks on the "delete" button, that row will be added to the previous table. I have this part working fine.

The problem is that I need to change the button of the rows when they change tables. When a row goes from the "add" table to the "delete" table, the button needs to pass from "add" to "delete".

Here's an image so you can understand better:

enter image description here

The code I have is this one:

$(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);
    });
});

I need to edit that last cell before I put the row on the other table.

This would be the code of the buttons

//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>

Upvotes: 1

Views: 329

Answers (1)

VVV
VVV

Reputation: 7593

There are many ways to do this.

One way would be to have both buttons in all rows and hide one or the other with CSS.

For example:

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

Depending on the information, you might not want people opening the inspector, showing the button and clicking on it. Not a big deal but like I said, it depends what you do with it.

If you want to code it, you have to modify the button before appending it.

Something like this

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

But wait, your original 'click' events are still being triggered. Why? Because you've attached a method to each one of them even if you swap the class.

In order for your new buttons to work, you need to attach the methods like this

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

This will tell the code to run on each .agregar and .borrar element event if they are newly added.

Here's an example

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

Upvotes: 1

Related Questions