使用jQuery修改HTML表格的结构

Question

使用jQuery修改HTML表格的结构

3

我是一位有用的助手，可以为您翻译文本。

我有一个元素列表（下面示例中的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来实现这个功能吗？

感谢您的帮助。

附注：如果您需要了解，X实际上是一个输入和一个标签，即：

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

- romaintaz

3个回答

2

根据您提供的额外信息，我认为这就是您想要的。它遍历表格并将每个第二行的单元格移动到前一行中...

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();
    }
}

- Prestaul

我们也可以使用“：eq”代替“：nth-child”。对于“：eq”，参数是从零开始的索引。对于“：nth-child”，参数是基于一的索引。作为程序员，我喜欢“：eq”，因为它像大多数编程语言一样从零开始，并且更加简洁。 - Palani

@Prestaul，我该如何使用它来创建三列而不是两列？谢谢。 - Spring

@romaintaz 我怎样才能使用这个代码创建三列而不是两列？谢谢！ - Spring

1

假设您的每行都从一个单元格开始，每个单元格都有一个标签和一个输入框，那么我认为您想要的是这样的内容：

$('#myTable tr').each(function() {
    $('<td/>').append( 
      $(this).find('td input') 
    ).appendTo(this);
  });

- Prestaul

我已经对我确切想要的进行了一些澄清...你的示例将输入与标签分开。实际上，我不想分离单元格的元素，而是将同一行中的2个单元格重新分组... - Romain Linsolas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1228 · Accepted Answer

有趣的练习。这样做可以达到你的要求，但可能并不完全符合你的期望。但它告诉你如何实现。你可以调整它以使其按照你的预期工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Example of restructuring tables</title>
    <script src="Scripts/jquery-1.2.6.commented.js"></script>
</head>
<!--<body><table id="Table1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>-->
<table id="myTable">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        debugger;
        var tds = $("#myTable tr td"); // gets all td elements in the table with id myTable
        var col1 = $("<tr></tr>"); // holds our first row's columns
        var col2 = $("<tr></tr>"); // holds our second row's columns
        var halfway = Math.ceil(tds.length / 2);
        // add the first half of our td's to the first row, the second half to the second
        for (var i = 0; i < tds.length; i++) {
            if (i < halfway)
                col1.append(tds[i]);
            else
                col2.append(tds[i]);
        }
        // clear out the clutter from the table
        $("#myTable").children().remove();
        // add our two rows
        $("#myTable").append(col1);
        $("#myTable").append(col2);
    });
</script>
</body>
</html>

看，你期望的示例将所有内容放在两行中，但是你的问题说“两列”。我之所以选择了两行，只是因为它更容易。你只需要修改for循环，使其更符合这个方向。