Use jQuery to move columns in order to next <tr> when page is resized

问题

Currently I am laying out information like so in the website:

td1 td2 td3 td4
td5 td6 td7 td8

When resizing the browser that the 4th and 8th td are now cut off, I would like this to happen:

td1 td2 td3
td4 td5 td6
td7 td8

... and eventually, if you kept going, it would appear like this:

td1
td2
td3
td4
etc

Does anyone know how I can make the columns move down into the next tr and push the preceding column across one?

回答1:

I never heard of anything like that, and it`s kinda silly to do that.

I wrote something quickly. You can check it here

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

It does need more work, but if you really need to use tables it`s a start I guess...

You would have to take in consideration classes applied to tables, recalculate widths and put them back to the page again. Also you would need to make them fit the table itself.

It would be easier to pull all TDs from the table and create divs from that.

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>

​ ​ Javascript:

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();​

来源：https://stackoverflow.com/questions/13792728/use-jquery-to-move-columns-in-order-to-next-tr-when-page-is-resized