Добавить строку таблицы после 4-го элемента JQuery

Question

Я пытаюсь запустить новую строку после каждого 4-го элемента, используя метод .after().
Моя логика заключается в том, чтобы закрыть тег строки и начать строку после четвертого элемента. Вместо того, чтобы закрывать строку и начинать новую строку, создается новая пустая строка.

Вот скрипку файлу http://jsfiddle.net/b4xhG/1/

Jquery Code

$("#table td:nth-child(4n)").after("</tr> <tr>"); 

Это, как он показывает

<table id="table" border="1px" width="500px"> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
    <td>7</td> 
    <td>8</td> 
    <td>9</td> 
    </tr> 
</table> 

Это как оно должно отображаться.

<table id="table" border="1px" width="500px"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
     <tr> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
     </tr> 
     <tr> 
      <td>9</td> 
     </tr> 
</table> 

Answer 1

Вы не можете вставить недопустимые/неполные фрагменты HTML (например: "</tr><tr>") с помощью after().

Однако вы можете сделать это нравится:

while($("#table td:nth-child(4n)").nextAll().length > 0) { 
    $('<tr/>').append($("#table td:nth-child(4n)").nextAll()).appendTo('#table');  
} 

Working Demo

Answer 2

var $td = $("#table td"); 

$td.each(function(i) { 
    if (i % 4 === 0) { 
     $td.slice(i, i+4).wrapAll('<tr/>'); 
    } 
}).parent('tr').unwrap(); 

http://jsfiddle.net/ZyFUU/

Answer 3

Другой возможный гуманного (DEMO):

$('#table td:nth-child(4n)').each(function() { 
    $('<tr>').html($(this).nextAll()).appendTo('#table tbody'); 
}); 

Answer 4

Вот 2 альтернативных варианта:

while($('#table').find('tr:last').children(':gt(3)').length > 0){ 
    $('#table').find('tr:last').after(
     $('#table').find('tr:last').children(':gt(3)') 
      .wrapAll('<tr></tr>').parent().remove() 
    ); 
} 

Jsfiddle Демо: http://jsfiddle.net/darkajax/MFTsu/

И:

while($('#table').find('tr:last').children(':gt(3)').length > 0){ 
    var newRow = ''; 
    $('#table').find('tr:last').children(':gt(3)').each(function(i,e){ 
     newRow += $(e).prop('outerHTML'); 
    }).remove(); 
    $('#table').find('tr:last').after('<tr>' + newRow + '</tr>'); 
} 

Jsfiddle Демо: http://jsfiddle.net/darkajax/YgAMd/