jquery - 使用 jQuery 修改 HTML 表格的结构

Question

我有一个元素列表(以下示例中的 X)显示在 HTML 表格的一行或一列中。

在 HTML 代码的角度来看，我有(水平显示):

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    ...
  </tr>
</table>

或(垂直显示):

<table id="myTable">
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
  ...
</table>

此 HTML 代码由 JSF 组件(称为 <h:selectManyCheckboxes/>)生成，因此，我无法控制此 HTML 代码。

但是，我想在 2 列中显示我的元素列表。 换句话说，我的表格的 HTML 代码将是这样的:

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
  ...
</table>

我如何使用 jQuery 做到这一点？

预先感谢您的帮助。

ps:如果你需要知道，X其实是一个输入和一个标签，即:

<td><input .../><label .../></td>

Answer 1

鉴于您提供的额外信息，我认为这就是您想要的。它遍历表格，将单元格从每隔一行移动到前一行...

var idx = 1;
var row, next;
while((row = $('#myTable tr:nth-child(' + idx++ + ')')).length) {
    if((next = $('#myTable tr:nth-child(' + idx + ')')).length) {
        row.append(next.find('td'));
        next.remove();
    }
}