Перемещение столбцов из одной строки в другую существующую строку в jQuery

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> 

Move 3 колонки из первой строки и вставить во второй существующей строки с помощью JQuery. Пожалуйста, предложите итеративно сделать это, когда количество столбцов в строке превышает 3, затем вставьте в новую существующую строку

Answer 1

Вы можете попробовать это:

---

$("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.

Answer 2

Хороший вопрос. Давайте попробуем так:

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

Snippet

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

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

Answer 3

Вот другая версия:

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