在新TD中添加元素

Question

我有这个表结构：

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

我希望将最后两行的两个右列添加到右侧，作为一个新列。

看起来像那样：

在我的方法（inspired here）中，元素只是在现有列中添加 ，而不是创建新列td：

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

$("table td:nth-child(2) [id$=1]").each(function(ind) {
  if (ind < newVals1.length) {
    var newElement = newVals1[ind];
    $(newElement).parent().parent().remove();
    $(this).after($(newElement));
  }
});

FIDDLE

那么如何在新的td中添加元素？

所以而不是：

<td>
  <input type="text" id="abc|1">
  <input type="text" id="abc|2">
  <input type="text" id="abc|3">
</td>

我想：

<td>
  <input type="text" id="abc|1">
</td>
<td>
  <input type="text" id="abc|2">
</td>
<td>
  <input type="text" id="abc|3">
</td>

简单地做

$(this).after("<td>" + newElement + "</td>")

结果

[object HTMLInputElement]

Answer 1

试试这个：

$("table td:nth-child(2) [id$=2]").each(function(i) {
    var $newCell = $(this).wrap('<td></td').parent();
    var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
    $(this).parents('tr').remove();
    $newRow.append($newCell);
});

https://jsfiddle.net/9uathy82/5/

Answer 2

你可以使用，

$(this).closest("tr").append($(newElement).wrap("<td></td>"));

• 获取父tr并附加包含在td元素
中的新元素