8

HTMLテーブルに表示したいデータの長いリストがあります(たとえば、州とその略語など)。データを 2 x 50 のテーブルに表示する代わりに、より大きな画面ではよりコンパクトにしたいと思います (したがって、ユーザーは上下にスクロールする必要はありませんが、水平方向にスクロールする必要はありません)。

したがって、これは動的に成長します。

状態 | アブ
-------------------
アラバマ州 | アラバマ州 アル
アラスカ | アラスカ AK
アリゾナ | アリゾナ AZ
アーカンソー | アーカンソー AR
カリフォルニア | カリフォルニア州
コロラド州 | コロラド州 CO
コネチカット | CT

に:

状態 | アブ | 状態 | アブ |
--------------------------------------
アラバマ州 | アラバマ州 アル | カリフォルニア | カリフォルニア |
アラスカ | アラスカ AK | コロラド州 | コロラド州 CO |
アリゾナ | アリゾナ AZ | アリゾナ州 | コネチカット | CT | CT |
アーカンソー | アーカンソー AR |

またはこれ:

状態 | アブ | 状態 | アブ | 状態 | アブ |
-------------------------------------------------- -------
アラバマ州 | アラバマ州 アル | アーカンソー | アーカンソー AR | コロラド州 | コロラド州 CO |
アラスカ | アラスカ AK | カリフォルニア | カリフォルニア | コネチカット | CT | CT |
アリゾナ | アリゾナ AZ | アリゾナ州 |

等....

画面幅によります。

私はjQueryを使用してRail 3アプリでこれを行っているので、jQueryソリューションを好みますが、どんなアイデアにもオープンです。

4

3 に答える 3

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)});
于 2012-06-28T05:41:13.063 に答える
1

テーブルレス ソリューションのデモを次に示します。現在、ページの読み込み時に列を配置するように設定されているだけで、サイズ変更処理のためにいくつかの小さな追加が必要になります。

デモ: http://jsfiddle.net/DPRsj/

これは、配列が次のようになっているjson配列に基づいています。

   [{"state":"AK","name":"Alaska"}........]

html は、json を解析する必要なくページに送信できます。状態リストの長さを取得する際にわずかな違いが必要になります。

HTML:

<div id="state_wrap">
    <div id="state_header"></div>
    <div id="state_list"></div>   
</div>

CSS:(非常に基本的な)

.state{  width:150px;  border:1px solid grey; border-top:none}
.st_name{ width: 120px;float:left}
.st_ab{ width:30px; margin-left: 120px;}
#state_header .state{
    font-weight:bold;
    color:blue;
    margin-right:10px;
    width: 150px;
    float:left;
}
.column{ width: 152px; float:left;margin-right:10px;}

JS:

$(function() {
    /* parse json to html*/
    var html = [];    
    $.each(states, function() {
        html.push(stateContainer(this.name, this.state));
    });    
    html.push('<div style="clear:both"></div>');    
    $('#state_list').html(html.join(''))
     /* END parse json to html*/

    var listW = 160, /* column width, including margin, set by css*/
        contW = $('#state_wrap').width();
    var num_cols = Math.floor(contW / listW)
    /* create headings*/
    var topHtml = [];
    for (i = 0; i < num_cols; i++) {
        topHtml.push(stateContainer('State', 'Abr'))
    }

    $('#state_header').html(topHtml.join(''));
    /*END create headings, START: create columns*/
    var start = 0,
        end = 0;
    var state_per_col = Math.floor(states.length / num_cols);
    var $states = $('#state_list .state')
    for (i = 0; i < num_cols; i++) {
        start = end;
        end = start + state_per_col + 1;
        $states.slice(start, end).wrapAll('<div class="column"></div>')
    }
});

function stateContainer(name, abr) {
    return '<div class="state"><div class="st_name">' + name + '</div><div class="st_ab">' + abr + '</div></div>';
}
于 2012-06-28T06:35:58.843 に答える
0

ブラウザーの要件と、列ヘッダーの重要性に応じて、css3 には、設定できる列幅 css プロパティがあります。(現在、-webkit および -moz プレフィックスが必要です。)

于 2012-06-28T08:10:18.517 に答える