应用 appendto 后将表代码的最后一个 td 更改为新代码

Question

基本上，我的代码是关于单击添加按钮并将行从 table2(id=second) 移动到 table1(id=first)。

我的问题

这是我代码中的最后一个 td。

<a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a>

当我点击添加图标时，它会变成

<p><a href="#"><i class="fa fa-search lightgreytxt txt14"></i></a></p>
<p><a href="#/" class="minusicon removerow"><i class="fa fa-minus-circle"></i></a></p>

但我得到的是如下所示的东西（也请参阅我的屏幕截图）

<a href="#/" class="plusicon">
    <p><a href="#"><i class="fa fa-search lightgreytxt txt14"></i></a></p>
    <p><a href="#/" class="minusicon removerow"><i class="fa fa-minus-circle"></i></a></p>
</a>

所以我想在应用 appendto 之后将<a href="#/" class="plusicon"></a> 更改/删除为另一个代码。但我不知道该怎么做。希望大家能给我一些建议。谢谢！

$(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row).appendTo(targetTable).addClass("tablerow").find("a").html(newLinkText);
   }
   
   $("#second a").on("click", function(){
       moveRow($(this).parents("tr"), $("#first"), "<p><a href='#'><i class='fa fa-search lightgreytxt txt14'></i></a></p><p><a href='#/' class='minusicon removerow'><i class='fa fa-minus-circle'></i></a></p>");
   });
   
   $(".removerow").click(function() {
        (this).closest('tr').remove()
    });
});

.plusicon{font-size: 18px; color: #75b653 !important; vertical-align:middle;}
.minusicon{font-size: 18px; color: #e77e3e !important; vertical-align:middle;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table id="second"> 
  <tr>
    <td>1</td>
    <td>first value</td>
    <td><a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a></td>
  </tr>
  <tr>
    <td>2</td>
    <td>second value</td>
    <td><a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a></td>
  </tr>
  <tr>
    <td>3</td>
    <td>third value</td>
    <td><a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a></td>
  </tr>
</table>

<hr/>

<table id="first">
  <tr>
    <td>1</td>
    <td>first value</td>
    <td>
      <p><a href="#"><i class="fa fa-search lightgreytxt txt14"></i></a></p>
      <p><a href="#/" class="minusicon removerow"><i class="fa fa-minus-circle"></i></a></p>
    </td>
  </tr>
</table>

Answer 1

您应该尝试用newLinkText 替换#first 表中的td:last-child

$(row).appendTo(targetTable).addClass("tablerow").find("td:last-child").html(newLinkText);

这是您更新的 javascript，

$(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row).appendTo(targetTable).addClass("tablerow").find("td:last-child").html(newLinkText);
   }

   $("#second a").on("click", function(){
       moveRow($(this).parents("tr"), $("#first"), "<p><a href='#'><i class='fa fa-search lightgreytxt txt14'></i></a></p><p><a href='#/' class='minusicon removerow'><i class='fa fa-minus-circle'></i></a></p>");
   });

   $('#first').on('click', '.removerow', function() {
     $(this).closest('tr').remove()
   });
});

希望这会有所帮助。