如何使用jquery在表的第n个之后进行换行

Question

我想要包装＆lt; row /＆gt;在我的桌子的第二个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，你不能像上面那样直接添加结束。如果你谷歌它为什么你不能在JQuery中添加结束标记，你可以得到更多的文章。现在我们遇到问题，我们如何解决这个问题。

感谢@FrédéricHamidi为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>并将其换行2.然后使用.html()更新表格tbody

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;