Edit table row javascript

Question

I have a table, that is dynamicallly increased with Firebase, and I need a delete and edit button on each row of the table, currently, the remove button is working, but I am having trouble with the edit button, I saw a few examples around, but i'm not sure how to do it using append()...

Here's what I have so far:

HTML

<table id="tableAssets" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">

    <thead>
      <tr id="tableHeader">
        <th class="mdl-data-table__cell--non-numeric">Name</th>
        <th class="mdl-data-table__cell--non-numeric">Brand</th>
        <th class="mdl-data-table__cell--non-numeric"> </th>
      </tr>
    </thead>

    <tbody id="table_body"> </tbody>

</table>

JavaScript

rootRef.on("child_added", snap => {

  var assetKey = snap.child("id").val();
  var name = snap.child("name").val();
  var brand = snap.child("brand").val();

  $("#table_body").append("<tr data-id='"+assetKey+"'>"+
                          "<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
                          "<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +

                          "<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
                              "<button class='edit-btn'><i class='material-icons'>mode_edit</i></button>"+" "+                                      
                              "<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
                          "</div></td></tr>");
});

And here is what I was thinking on doing with the edit button: Hide the whole row, and add a new one with the saved information, but with text fields, and change the edit button with a save button, but I have no idea how I should be doing this...

$("#table_body").on('click','.edit-btn', function(e){
var $row = $(this).closest('tr');
  $row.hide();

});

Answer 1

I'd suggest you to do this:

1. Have two rows, one for view and one for edit mode. This is easier to maintain.
2. Assign an id to the whole row: $("#table_body").append("<tr id='"+assetKey+"'>
3. Then when clicking that edit button, pass the id to some method as when you append you have it, it is easier. You can use something like onclick and call the method:

<button class='edit-btn' onclick=edit(\\'"+assetKey+"\\')><i class='material-icons'>mode_edit</i></button>

4. On edit, hide the clicked button row and show the edit mode for that row. As it is already rendered, it works great if you have multiple rows, stays in place: ('#'+id).hide();
5. The edit mode row "view" would show the save button or anything else you need. Use the same Technique/strategy to call a save() method.
6. When save is successful, rebuild both rows and replace them so everything is neat and stays in line.

And to make sense of this and it is not just in words, a functional example using your code on jsfiddle here .

Hope this is of help!