javascript - 如何使用jquery在表的第n个<td>之后包装<tr/>

Question

我想在表格的第二个 td 之后换行 。

这是我的代码:

<table class="test table">
    <tbody>
        <tr><td>Row 1 col 1</td><td>Row 1 col 2</td><td>Row 1 col 3</td><td>Row 1 col 4</td></tr>

        <tr><td>Row 2 col 1</td><td>Row 2 col 2</td><td>Row 2 col 3</td><td>Row 2 col 4</td></tr>

        <tr><td>Row 3 col 1</td><td>Row 3 col 2</td><td>Row 3 col 3</td><td>Row 3 col 4</td></tr>

        <tr><td>Row 4 col 1</td><td>Row 4 col 2</td><td>Row 4 col 3</td><td>Row 4 col 4</td></tr>
     </tbody>
</table>

我想看到这样的代码:

<table class="test table">
    <tbody>
        <tr><td>Row 1 col 1</td><td>Row 1 col 2</td></tr><tr><td>Row 1 col 3</td><td>Row 1 col 4</td></tr>

        <tr><td>Row 2 col 1</td><td>Row 2 col 2</td></tr><tr><td>Row 2 col 3</td><td>Row 2 col 4</td></tr>

        <tr><td>Row 3 col 1</td><td>Row 3 col 2</td></tr><tr><td>Row 3 col 3</td><td>Row 3 col 4</td></tr>

        <tr><td>Row 4 col 1</td><td>Row 4 col 2</td></tr><tr><td>Row 4 col 3</td><td>Row 4 col 4</td></tr>
     </tbody>
</table>

我尝试过这种方法:

$(".test tr td:eq(2)").wrap('<tr />');

但它无法正常工作。

Answer 1

所以我们的最终目标是添加 </tr><tr>第二个之后<td>结束。如果您尝试类似 $(".test tr td:eq(1)").after('</tr><tr>'); 的代码，它不会起作用。这将添加如下元素。

因为使用 JQuery，您无法像上面那样直接添加结束语。如果你用 google 搜索一下为什么不能在 JQuery 中添加结束标签，你可以获得更多文章。现在来谈谈我们的问题，我们如何解决这个问题。

感谢@Frédéric Hamidi 为 ul 提供了类似情况的解决方案和li元素here 。在JQuery中，您可以使用nextAll()与 andSelf()获取要移动的元素，然后创建一个新的 <tr>并使用append()重新定位元素。我重构了他的解决方案来解决我们的问题，如下所示。

$("table.test tr td:nth-child(3)").each(function(){
       $("<tr>").insertAfter($(this).parent())
             .append($(this).nextAll().andSelf());
    });

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="test table">
    <tbody>
        <tr><td>Row 1 col 1</td><td>Row 1 col 2</td><td>Row 1 col 3</td><td>Row 1 col 4</td></tr>

        <tr><td>Row 2 col 1</td><td>Row 2 col 2</td><td>Row 2 col 3</td><td>Row 2 col 4</td></tr>

        <tr><td>Row 3 col 1</td><td>Row 3 col 2</td><td>Row 3 col 3</td><td>Row 3 col 4</td></tr>

        <tr><td>Row 4 col 1</td><td>Row 4 col 2</td><td>Row 4 col 3</td><td>Row 4 col 4</td></tr>
     </tbody>
</table>

Here是 JSFiddle 版本，如果您想锻炼一些其他东西。