Update td content of a loaded tr

Question

I tried several stuff I found now, but nothing seems to work for me.

On my site I got two tables. In one of them are entries with a button in the last column "add" which deletes the row from that table and moves it to the other table. When this happens I want to edit the content of that last <td> , so that there will be an "delete" button, which moves the entry back to the first table.

$("#questiontable").on('click', '.btnDelete', function () {
    var question_id = $(this).val();
    var tr = $(this).closest('tr').remove().clone();
    tr[4].html("<button>delete</button>");
    tr.appendTo("#currentquestiontable");
}); 

The td looks like this before:

<td>
    <input type="hidden" name="id" value= {{question.id}} />
    <button class="btnDelete">Hinzufügen</button>
</td>

Answer 1

You can set one click listener for both tables, and check by table id in order to transfer tr from table to another, same thing for text button,(only change innerText button)

use listner for both table selectors:

$("#questiontable , #currentquestiontable").on('click', '.btnAction', function() {
  var question_id = $(this).prev("input").val();
  console.log(question_id)
  
  let id = $(this).closest('table').attr("id");
  var $tr = $(this).closest('tr').remove().clone();
  
  let tableId= "";
  let buttonText = "";
  if(id === "questiontable") {
    tableId= "#currentquestiontable";
    buttonText = "remove";
  }
  else {
    tableId= "#questiontable";
    buttonText = "add";
  }
  
  $tr.find(".btnAction").text(buttonText);
  $tr.appendTo(tableId);
});

See below example:

 $("#questiontable, #currentquestiontable").on('click', '.btnAction', function() { var question_id = $(this).prev("input").val(); console.log(question_id) let id = $(this).closest('table').attr("id"); var $tr = $(this).closest('tr').remove().clone(); let tableId= ""; let buttonText = ""; if(id === "questiontable") { tableId= "#currentquestiontable"; buttonText = "remove"; } else { tableId= "#questiontable"; buttonText = "add"; } $tr.find(".btnAction").text(buttonText); $tr.appendTo(tableId); });

 #currentquestiontable { background-color:gray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> table 1 <table id="currentquestiontable"> <tr> <td>id</td> <td>name</td> <td>action</td> </tr> </table> <hr> <table id="questiontable"> <tr> <td>id</td> <td>name</td> <td>action</td> </tr> <tr> <td>1</td> <td>elemnt n° 1</td> <td> <input type="hidden" name="id" value="1" /> <button class="btnAction">add</button> </td> </tr> <tr> <td>2</td> <td>elemnt n° 2</td> <td> <input type="hidden" name="id" value="2" /> <button class="btnAction">add</button> </td> </tr> <tr> <td>3</td> <td>elemnt n° 3</td> <td> <input type="hidden" name="id" value="3" /> <button class="btnAction">add</button> </td> </tr> <tr> <td>4</td> <td>elemnt n° 4</td> <td> <input type="hidden" name="id" value="4" /> <button class="btnAction">add</button> </td> </tr> <tr> <td>5</td> <td>elemnt n° 5</td> <td> <input type="hidden" name="id" value="5" /> <button class="btnAction">add</button> </td> </tr> </table>