jquery - jqueryを使ってhtmlに挿入する方法

Question

私はそのようなhtmlテーブルを持っています

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

結果は

1 2 3 4

私は結果が欲しい

1 2

3 4

しかし、jqueryを使用して実行時に

何か案は？

Answer 1

jQuery の使用

HTML

<table id="table1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

jQuery

$("#table1 td:first-child").css("float", "left");
$("#table1 td:nth-child(2)").css("display", "block");
$("#table1 td:nth-child(3)").css("float", "left");
$("#table1 td:nth-child(4)").css("float", "left");

CSS の使用

jqueryを使用せずにcssを使用してこれを行うこともできます

HTML

<table id="table2">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

CSS

#table2 td
{
    float: left;
}
#table2 tr > td:first-child + td
{
    display: block;
    float: none;
}

例

Answer 2

最後の 2 つのセルを新しい行に配置して、テーブルを再構築できます。

$('tr').each(function(){
    $(this).after( $('<tr>').append( $(this).find('td:gt(1)')))
});

デモ: http://jsfiddle.net/Fyvwd/

Answer 3

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

動作しますが、完全には正しくありません ))

$(document).ready(function(){
    $("td:even").css({"display":"block","float":"left", "clear":"left"});
    $("td:odd").css({"display":"block", "float":"left"});
});