如何動態移動 <tr> 進入新創建的 <div> ？

Question

我有以下HTML結構：

<table id="j_idt28:innerContent" class="innerContent">
    <tbody>
      <tr>
      <tr>
      <tr>
      <tr>
      .......
      <tr>
      <tr>
    </tbody>
</table>

標記中填充了已解析的XML響應。

我通常有20個左右的tr標簽。 我希望在第4、8、12等標簽之后創建一個並將4個標簽插入其中。

到目前為止，這是我的jquery：

var i = 1;
var j = 2;
var margin = 0;
var max = $('.innerContent tr').length;
  for(i = 1; i<=max; i++)
  {
  var child1 =  i - 3;
  var child2 =  i - 2;
  var child3 =  i - 1;
  var hotel1 =  $('.innerContent tr:nth-child('+child1+')');
  var hotel2 =  $('.innerContent tr:nth-child('+child2+')');
  var hotel3 =  $('.innerContent tr:nth-child('+child3+')');
  var hotel4 =  $('.innerContent tr:nth-child('+i+')');
    if(i%4 == 0)
    {
    $('.innerContent tbody').prepend('<div class="line_wrapper"></div>');
    $('.line_wrapper').append(hotel1,hotel2,hotel3,hotel4);
}
  }
  for(j =2; j<=max ;j++)
  {
  var hotel =  $('.innerContent tr:nth-child('+j+')');
    margin = margin + 280;
    hotel.css('margin-left',margin+'px');
    //$('.line_wrapper').append(hotel);
  }

這只是不完全像我預期的那樣。 我想添加div，以便我使用引導流體布局。

Answer 1

您可以使用以下每種方法進行操作：

$('#mytable tr').each(function (i) {
    i%4?$(this).prev('div').append(this):$(this).wrap('<div/>');
});