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

您也可以使用 css 而不使用 jquery 来执行此操作

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

<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"});
});

Answer 3

可以通过将最后 2 个单元格放入新行来重组表格：

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

演示：http: //jsfiddle.net/Fyvwd/