jQuery实现表格行中第二与第三单元格位置互换的技术求助

嘿，我来帮你搞定这个单元格互换的问题！你的思路方向是对的，但代码里的嵌套逻辑和元素选择出现了问题，导致互换操作没生效。

先分析你代码里的问题 #

• 多余的嵌套each循环：你已经在遍历每一行tr了，不需要再嵌套两层each去遍历td——这不仅没必要，还会导致后续的元素选择出错。
• 错误的find()操作：当你选中第二列的td后，又调用$(this).find('td:nth-child(2)')，但td本身是没有子td的，所以这个选择器根本找不到任何元素，后续的互换自然无法执行。
• 全局选择器的问题：你用insertAfter('td:nth-child(2)')时，没有限定在当前行内，这会导致元素被插入到页面所有第二列td的后面，而不是当前行的第三列位置。

正确的解决方案 #

我们只需要在每一行中精准获取第二和第三单元格，然后通过jQuery的插入方法完成互换即可——insertBefore或insertAfter方法会自动把元素从原位置移除，不需要额外的删除操作。

完整代码示例 #

<table id="myTable">
  <tr>
    <td>1 APPLES</td>
    <td>3 ORANGES</td>
    <td>2 BANANAS</td>
    <td>4 GRAPES</td>
  </tr>
  <tr>
    <td>1 APPLES</td>
    <td>3 ORANGES</td>
    <td>2 BANANAS</td>
    <td>4 GRAPES</td>
  </tr>
  <tr>
    <td>1 APPLES</td>
    <td>3 ORANGES</td>
    <td>2 BANANAS</td>
    <td>4 GRAPES</td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#myTable tr').each(function() {
  // 获取当前行的第二、第三单元格
  const $cell2 = $(this).find('td:nth-child(2)');
  const $cell3 = $(this).find('td:nth-child(3)');
  
  // 互换位置：把第二单元格插入到第三单元格的后面
  $cell2.insertAfter($cell3);
  
  // （可选）添加样式验证效果
  $cell2.css('background', 'orange');
  $cell3.css('background', 'tan');
  $(this).css('border', '2px solid yellowgreen');
});
</script>

代码说明 #

1. 遍历每一行：用$('#myTable tr').each()精准遍历目标表格的所有行。
2. 获取目标单元格：通过find('td:nth-child(n)')在当前行内获取第二、第三列的td，确保选择范围限定在当前行。
3. 执行互换：调用$cell2.insertAfter($cell3)，这会把第二单元格从原位置移除，插入到第三单元格的后面，实现两者位置互换。你也可以用$cell3.insertBefore($cell2)，效果是一样的。

这样修改后，就能完美实现你想要的“只互换位置，不修改单元格内容”的需求啦！

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