javascript - 将 td 移动到新列

Question

我有一张这样的 table :

<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
  </tr>
  <tr>
    <td>some column|2</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|2</td>
    <td id="def|2">def</td>
  </tr>
</table>

如何将后缀为 |2 的 tds 向右移动，从而添加第 3 列？此外，剩余的“空”td“某列|2”和“另一列|2”应完全删除。

最终结果应该如下所示:

这是所需的代码:

<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
    <td id="def|2">def</td>
  </tr>
</table>

这是我的方法，但行不通:

$("table td:nth-child(2)[id$=2]").after("table td:nth-child(2)");

FIDDLE .

Answer 1

使用此代码

var firstTd = $("table").find("tr:nth-child(3) > td:nth-child(2)");
var secondTd = $("table").find("tr:nth-child(4) > td:nth-child(2)");

$("table").find("tr:nth-child(3), tr:nth-child(4)").remove();
$("table").find("tr:nth-child(1)").append(firstTd);
$("table").find("tr:nth-child(2)").append(secondTd);

table, tr, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
  </tr>
  <tr>
    <td>some column|2</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|2</td>
    <td id="def|2">def</td>
  </tr>
</table>