javascript - 更新加载的 tr 的 td 内容

Question

我尝试了一些我现在发现的东西，但似乎没有什么对我有用。
在我的网站上，我有两张 table 。其中一个是在最后一列“添加”中带有按钮的条目，该按钮从该表中删除该行并将其移动到另一个表中。发生这种情况时，我想编辑最后一个 <td> 的内容，这样就会有一个“删除”按钮，它将条目移回第一个表。

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

td 之前看起来像这样:

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

Answer 1

您可以为两个表设置一个单击监听器，并通过表 id 检查以将 tr 从表转移到另一个表，文本按钮也是如此，(仅更改 innerText 按钮)
对两个表选择器使用监听器:

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

见下面的例子:

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