Question

我试图通过jQuery从下一个td列表创建两个列表：

<table>
  <tr id="dw">
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      ...
      <td>n</td>
  </tr>
</table>

我期待类似的东西：

<table>
 <tr>
    <td>1</td>
    <td>2</td>
 </tr>
 <tr>
    <td>3</td>
    <td>4</td>
 </tr>
 ...
 <tr>
    <td>n-1</td>
    <td>n</td>
 </tr>
</table>

有人可以填写我的代码吗？

$('#dw tr').each(function(){
    $('<tr>').insertAfter(this).append($('td:eq(1)',this))
})

Answer 1

我看到一个问题 - 您正在使用选择器$（'＃dw tr'） - 这意味着您正在寻找ID为#dw INSIDE a tr的元素。在您的示例中，＃dw是实际的tr。所以这个选择器不起作用

为什么不使用$（'＃dw'）？

Answer 2

$("table").append('<tr></tr>'); // generate the second row container
$("td:gt(1)").appendTo('tr+tr'); // move the 3rd-4th td to the new row

Answer 3

用于创建新tr的代码，用于将索引大于1的当前td插入到新创建的tr中，并在已存在的tr之后附加此新$(document).ready(function() { var newTr = $('<tr>'); $('#dw td:gt(1)').appendTo(newTr); newTr.insertAfter('#dw'); });表

Fiddle

<table id="table">
  <tr id="dw">
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
  </tr>
</table>

更新以获取更新的问题。

Updated fiddle

$(document).ready(function()
{
    var currentTr = $('<tr>');
    var table = $('#table');
    $('#dw td').each(function(index)
    {
        currentTr.append(this);
        if (index % 2)
        {
            table.append(currentTr);
            currentTr = $('<tr>');
        }
    });
    $('#dw').remove();
});

代码：

{{1}}

Answer 4

如果您有多行，请执行此操作，

$("tr").each(function() {
    $(this).find("td").filter(function() {
        return $(this).index() > 1
    }).wrapAll("<tr></tr>")

    $(this).after($(this).find("tr"));
});

Fiddle

从td在一行中创建两个列表

4 个答案: