如何使用 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

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

因为使用 JQuery，您不能像上面那样直接添加关闭。如果你用谷歌搜索为什么不能在 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 版本，如果你想锻炼一些其他的东西。

Answer 2

一种选择是循环通过您的 <td>s 并将其包装为 2。然后使用 .html() 更新表 tbody

$(function() {

  var td = $(".test td");
  var html = "";

  for (var x = 0; x < td.length; x += 2) {
    html += "<tr>";
    html += $(td[x]).prop('outerHTML');
    html += $(td[x + 1]).prop('outerHTML');
    html += "</tr>";
  }

  $(".test tbody").html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>