点击添加按钮移动表格行后，替换最后一个td内<a>标签的问题求助

我懂你遇到的问题了——你本来想把目标行最后一个单元格里的加号按钮彻底换成搜索+减号的按钮组合，但现在新内容被嵌套到原来的<a>标签里了，这明显不对。问题出在你原代码里的这一行：

$(row).appendTo(targetTable).addClass("tablerow").find("a").html(newLinkText);

这里的.find("a").html(newLinkText)是在原来的<a>标签内部插入新内容，而不是替换掉整个<a>标签本身。我们需要调整逻辑，找到那个包含加号按钮的<td>，直接替换它的全部内容。

另外还要注意：动态添加的.removerow按钮不能用普通的.click()绑定事件，要用事件委托才能让它生效。

修改后的完整代码 #

JavaScript

$(function() {
  function moveRow(row, targetTable, newContent){
    // 找到行里最后一个td（也就是包含加号按钮的那个），替换它的内容
    $(row).appendTo(targetTable).addClass("tablerow").find("td:last").html(newContent);
  }

  $("#second a").on("click", function(){
    const newButtons = `
      <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>
    `;
    moveRow($(this).parents("tr"), $("#first"), newButtons);
  });

  // 用事件委托绑定动态生成的removerow按钮事件
  $("#first").on("click", ".removerow", function() {
    $(this).closest('tr').remove();
  });
});

CSS

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

HTML

<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>

关键修改点说明 #

1. 替换TD内容而非修改A标签：把.find("a").html(newLinkText)改成.find("td:last").html(newContent)，直接替换整个单元格的内容，彻底移除原来的加号按钮。
2. 事件委托处理动态元素：用$("#first").on("click", ".removerow", function(){...})代替原来的.removerow.click()，这样动态添加的减号按钮也能触发删除事件。
3. 优化字符串写法：用模板字符串（反引号）来写按钮内容，可读性更好。

内容的提问来源于stack exchange，提问作者Evelyn