表 - 每行3个细胞

时间:2011-03-02 14:07:10

标签: jquery html dynamic

http://jsfiddle.net/tiitremmel/DpMB7/ - 我已经完成的基本样本

我正在尝试重新排列表格单元格,这样表格每行总会产生3个单元格。表默认情况下每行最多1个单元格。

默认表格外观:

1
2
3
4
5
6
7个

结果应该是

1 2 3
4 5 6
7

jQuery应该每行限制3个单元格。

2 个答案:

答案 0 :(得分:3)

您可以使用切片以您想要的方式拆分td并将它们附加到您的桌子上。

while($("#source td").length > 0){
    $("#des").append($("<tr/>").append($("#source td").slice(0, 3)));
}
$("#source").remove(); 

鉴于此来源:

<table id="source">
    <tr>
        <td>1
        </td>
    </tr>
    <tr>
        <td>2
        </td>
    </tr>
    <tr>
        <td>3
        </td>
    </tr>
    <tr>
        <td>4
        </td>
    </tr>
    <tr>
        <td>5
        </td>
    </tr>
    <tr>
        <td>6
        </td>
    </tr>
    <tr>
        <td>7
        </td>
    </tr>
</table>

您最终会得到以下结果:

<table id="des">
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                2
            </td>
            <td>
                3
            </td>
        </tr>
        <tr>
            <td>
                4
            </td>
            <td>
                5
            </td>
            <td>
                6
            </td>
        </tr>
        <tr>
            <td>
                7
            </td>
        </tr>
    </tbody>
</table>

jsfiddle上的示例。

答案 1 :(得分:0)

您可以尝试使用此类http://jsfiddle.net/DpMB7/10/

var table$ = $('<table class="formattedTable"/>');
$('table.myTable td').each(function(index) {
    if (index % 3 === 0) {
        table$.append('<tr/>');
    }
    table$.find('tr:last').append(this);
});
$('body').append(table$);

这不是世界上最好的jQuery代码,但是嘿,我正在学习:)