Update td content of a loaded tr

user_10738077 0
Viewed 91

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>
html jquery javascript
1 Answers

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>

user_29324760
Related