如何浮动使用Javascript或jQuery的

Question

我想漂浮最后2列，如“输出2”，我可以浮表像“输出1”表的表最后两列结束，是有可能上浮表 如“输出2”。

为了得到输出1，我计算列号，然后当涉及到第3列时，我将唯一的ID添加到列 之后，我使用该ID分割行。

请别人指教我如何显示表格，如“输出2”。

原始编码：

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

输出1：

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

输出1：jQuery代码

<script type="text/javascript"> 
     $('td').each(function(){ 

       var col = $(this).parent().children().index($(this)); 
       var row = $(this).parent().parent().children().index($(this).parent()); 

       if(col == 2){ 
        var newid = "breakId"+row+""+col; 
        $(this).attr('id', newid); 
        var boundary = $("#"+newid); 
        $("<tr>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());  
       } 
     }); 
</script> 

输出2：

<table> 
    <tr> 
     <td>row 1 col 1</td> 
     <td>row 1 col 2</td> 
    </tr> 
    <tr> 
     <td>row 2 col 1</td> 
     <td>row 2 col 2</td> 
    </tr> 
    <tr> 
     <td>row 3 col 1</td> 
     <td>row 3 col 2</td> 
    </tr> 

    <tr> 
     <td>row 1 col 3</td> 
     <td>row 1 col 4</td>   
    </tr>  
    <tr> 
     <td>row 2 col 3</td> 
     <td>row 2 col 4</td>  
    </tr>  
    <tr> 
     <td>row 3 col 3</td> 
     <td>row 3 col 4</td>   
    </tr>  
</table> 

Answer 1

$('tr').each(function(){    
    var cell3 = $(this).find("td:eq(2)"); 
    var cell4 = $(this).find("td:eq(3)"); 
    var newRow = "<tr></tr>"; 
     newRow= $(newRow).append(cell3); 
     newRow= $(newRow).append(cell4); 
    $("#table_id").append(newRow);  
}); 

你的HTML表格的table_id =标识

jsfiddle