创建一个动态扩展列数的html表,以适应屏幕大小

Question

我有很长的数据列表(例如说国家及其缩写)我想在HTML表格中显示.而不是在2 x 50表格中显示数据,我希望它对于更大的屏幕更紧凑(因此用户没有向上和向下滚动,但仍然不必水平滚动)

所以这会动态增长:

State       | Ab
-------------------
Alabama     | AL
Alaska      | AK
Arizona     | AZ
Arkansas    | AR
California  | CA
Colorado    | CO
Connecticut | CT

至:

State       | Ab | State       | Ab |
--------------------------------------
Alabama     | AL | California  | CA |
Alaska      | AK | Colorado    | CO |
Arizona     | AZ | Connecticut | CT |
Arkansas    | AR |

或这个:

State       | Ab | State      | Ab | State       | Ab |
---------------------------------------------------------
Alabama     | AL | Arkansas   | AR | Colorado    | CO |
Alaska      | AK | California | CA | Connecticut | CT |
Arizona     | AZ |

等等....

取决于屏幕宽度.

我在使用jQuery的Rail 3应用程序中这样做,所以我更喜欢jQuery解决方案,但对任何想法都持开放态度.

Answer 1

找不到现成的解决方案，但这个功能应该可以解决问题！

/*
This function will create a table with fixed `COL_WIDTH' (default=150 px) 
that uses as many columns as can be fit into the HTML element with id `table_id'.

A one-dimensional array of values to fill the table with should be passed in as 
`data'.
*/
function fillScreenWithData(table_id, data, COL_WIDTH){
    if (!COL_WIDTH) COL_WIDTH = 150;

    TABLE = $(table_id);
    alert(TABLE);
    TABLE_STRING = "<table>"
    var doc_width = TABLE.width();
    var num_cols = Math.floor(doc_width / COL_WIDTH);
    var num_rows = Math.ceil(data.length / num_cols); 

    for (var i = 0; i < num_rows; i++){
        TABLE_STRING += "<tr>";
        for (var j = 0; j < num_cols; j++){
            TABLE_STRING += "<td>";
            index = i + j*num_rows;
            if (index < data.length) {
                TABLE_STRING += data[index];
            }
            TABLE_STRING += "</td>"
        }
        TABLE_STRING += "</tr>"
    }
    TABLE_STRING += "</table>"
    TABLE.html(TABLE_STRING);
}

// probably fetch this JSON array of data with an AJAX request
var data = ["Alabama", 
        "Alaska",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Extra Item",
        ]

// run the function on page load
$(function(){fillScreenWithData("#table", data)});