Question

在下面查找我的表格结构。

<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
        <tr>
        </tr>
    </tbody>
</table>

我想让它看起来像

<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>            
            <td>D</td>
            <td>E</td>
        </tr>
    </tbody>
</table>

从第一行移动3列，并使用JQuery插入第二行。当一行中的列数超过3时，请建议迭代执行此操作，然后插入新的现有行

Answer 1

好问题。让我们这样试试：

$(function () {
  // Create two temp rows.
  a = $("<tr />");
  b = $("<tr />");
  // Find our TR and loop in all the TDs.
  $("tr").first().find("td").each(function () {
    if (a.find("td").length < 3)
      a.append(this);
    else
      b.append(this);
  });
  c = $("tr").first().closest("tbody");
  $("tr").first().remove();
  $("tbody").append(a);
  $("tbody").append(b);
});

<强>段

＆＃13;

$(function () {
  // Create two temp rows.
  a = $("<tr />");
  b = $("<tr />");
  // 
  $("tr").first().find("td").each(function () {
    if (a.find("td").length < 3)
      a.append(this);
    else
      b.append(this);
  });
  c = $("tr").first().closest("tbody");
  $("tr").first().remove();
  $("tbody").append(a);
  $("tbody").append(b);
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <td>E</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

这是另一个版本：

<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
        <tr>
        </tr>
    </tbody>
</table>
<button id="btnClick">Format</button>

   $("#btnClick").click(function () {
    $('table tbody tr').each(function(index,options)
    {
        $(this).find('td').each(function(index1,options1)
        {
           if(index1 > 2)
           {
              $('table tbody tr').eq(index+1).append($(this));         
           }
        });        

    });
});

示例：http://jsfiddle.net/zo3hh2ye/15/

Answer 3

You can try this:

$("tbody td:nth-child(3n)")
    .css("background-color", "lightblue")
    .after("myPointer");


$("tbody").each(function(){

    /* update new TR's based on "myPointer" */
    var new_html = $(this).html().replace(/myPointer/g, "</tr><tr>");
    $(this).html(new_html);



    /* bonus - remove empty TR's */

    $("tr", this).each(function(){
    // loop through all "tr" in "this"-"tbody" scope

        if ($("td", this).length == 0) {
        // if there are zero "td" in "this"-"tr" scope

            $(this).remove();
            // then remove "$(this)"-"tr"

        }

    });


});

Jsfiddle here.

将列从一行移动到jquery中的另一行

3 个答案: