jquery - 调整页面大小时，使用 jQuery 移动列以便下一个

Question

目前，我正在网站上列出这样的信息：

td1 td2 td3 td4
td5 td6 td7 td8

在调整第 4 和第 8 td 现在被切断的浏览器大小时，我希望发生这种情况：

td1 td2 td3
td4 td5 td6
td7 td8

...最终，如果您继续前进，它将如下所示：

td1
td2
td3
td4
等

有谁知道我如何使列向下移动到下一个 tr 并将前一列推过一个？

Answer 1

我从来没有听说过这样的事情，这样做有点傻。

我很快就写了一些东西。你可以在这里查看

http://jsfiddle.net/M2JBS/37/

它确实需要更多的工作，但如果你真的需要使用表格，我想这是一个开始......

您必须考虑应用于表格的类，重新计算宽度并将它们再次放回页面。此外，您还需要使它们适合桌子本身。

从表中提取所有 TD 并从中创建 div 会更容易。

HTML

 <div id="tableContainer">
    <table class="destroy" border="1">
        <tr>
            <td>test 1</td>
            <td>test 2</td>
            <td>test 3</td>
        </tr>
        <tr>
            <td>test 4</td>
            <td>test 5</td>
            <td>test 6</td>
        </tr>
        <tr>
            <td>test 7</td>
            <td>test 8</td>
            <td>test 9</td>
        </tr>
        <tr>
            <td>test 10</td>
            <td>test 11</td>
            <td>test 12</td>
        </tr>
        <tr>
            <td>test 13</td>
            <td>test 14</td>
            <td>test 15</td>
        </tr>
    </table>
</div>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

window.onresize = function() {
    customizeTables()
};

function customizeTables() {
    // new table
    var nt = new Array();
    // current table tds
    var elements = new Object();
    // table parent width
    var wrap = $('table').parent().width();
    // current generated width
    var ct = 0;
    var fw = 0;
    // col of new table
    var col = new Array();

    $('table.destroy td').each(function(index, ob) {

        fw = $(ob).width() + 2; //borders
        fw += parseFloat($(ob).css('padding-left').replace("px", ""));
        fw += parseFloat($(ob).css('padding-right').replace("px", ""));
        fw += parseFloat($(ob).css('margin-left').replace("px", ""));
        fw += parseFloat($(ob).css('margin-right').replace("px", ""));

        if ((ct + fw) <= wrap) {

            ct += fw;
        } else {

            nt.push(col);
            ct = fw;
            col = [];
        }

        col.push(ob);
        // all elements (all tds)
        elements[index] = ob;
    });
    nt.push(col);

    var $table = $('<table class="destroy" border="1">');
    var row = '';

    $.each(nt, function(row, cols) {

        var row = '<tr>';

        for (i in cols) {
            row += '<td>' + $(cols[i]).html() + '</td>';
        }

        $table.append(row + '</tr>');

    });

    $table.append('</table>');
    $('#tableContainer').empty();
    $table.appendTo('#tableContainer');
}
customizeTables();​