当前位置：文江博客话题详情

表 - 每行 3 个单元格

发布于 2024-10-20 08:20:13 字数 353 浏览 0 评论 0原文

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

我正在尝试重新排列表格单元格，以便表格每行始终包含 3 个单元格。默认情况下，表格每行始终有 1 个单元格。

默认表格外观：

1
2
3
4
5
6
7

结果应该是

1 2 3
4 5 6
7

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诗化ㄋ丶相逢 2024-10-27 08:20:13

您可以使用 slice 以您想要的方式拆分 td，并将它们附加到 des 表中。

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 上的示例。

You can use slice to split up your td's in the fashion you want and append them to your des table.

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

Given this source:

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

You will end up with the following:

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

Example on jsfiddle.

回复收藏 0 原文

酒解孤独 2024-10-27 08:20:13

你可以尝试这样的 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 代码，但是嘿，我正在学习:)

You can try something like this 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$);

It's not the best jQuery code in the world, but hey, I'm learning :)

回复收藏 0 原文

~没有更多了~