0

ajaxコールバックから戻ってくる文字列の配列（画像のURL）があり、画像をhtmlテーブルにレンダリングする必要があるという問題があります。問題は、もちろんリストの長さがわからないことですが、常に6列のテーブルをレンダリングする必要があります。テーブルを作成する方が良いですか（次にセルに入力するか、その場でテーブルを作成します（.each以下の各ステートメント内の列の数をループします）。2番目のテーブルはより動的に見えますが、あまりエレガントではありません。

var tableHTML = [];
tableHTML.push("<table>");

$.each(data.ImageURLs, function(index, imageURL) {

    // create table content
    if (index % 1 == 0) {
        tableHTML.push("<tr>");
    }
    tableHTML.push("<td>" + imageURL + "</td>");

    if (index % 6 == 0) {
        tableHTML.push("</tr");
    }
});

tableHTML.push("</table>");
$("#myTable").html(tableHTML.join(""));
4

3 に答える 3

1

私が通常行うことは、必要に応じて最後の行に追加の要素を埋め込むためのヘルパー関数を作成することです。

アイテムの数を行ごとのアイテムの係数と比較することで、必要な数を取得できます。sliceデータの各行を作成するために使用します

var items_per_row = 6;

var tableHTML = ['<table border="1">'];
var num_items = data.length;



for (j = 0; j < num_items; j = j + items_per_row) {
    var rowEnd = j + items_per_row;
    var rowData = data.slice(j, rowEnd);

    tableHTML.push('<tr>');
    $.each(rowData, function (idx, item) {
        tableHTML.push('<td>' + item + '</td>')
    });
    /* pad last row if needed */
    if (rowEnd > num_items) {
        tableHTML.push(emptyCells(num_items, items_per_row));
    }
    tableHTML.push('</tr>');

}


tableHTML.push("</table>");

function emptyCells(num_items, items_per_row) {
    var qty = items_per_row - (num_items % items_per_row);

    var cells = [];
    for (i = 0; i < qty; i++) {
        cells.push('<td class="empty">Empty</td>')
    }

    return cells.join('')
}

デモ：http：//jsfiddle.net/VTLBF/2

于 2013-03-16T13:18:53.930 に答える
0

これを試してみませんか？

デモ

https://code.google.com/p/html5shiv/

そしてこれは<p>、

@media only screen and (min-width: 740px) {
  #multicolumn { 
    column-count:6; 
    column-gap: 10px; 

    -webkit-column-count: 6; 
    -webkit-column-gap: 10px;

    -moz-column-count: 6;
    -moz-column-gap: 10px;
  }      
  p:first-of-type {
    margin-top:0 !important;
  }
}
于 2013-03-16T12:00:43.620 に答える
0

良い方法（おそらく最良の方法）は、 jquerytmplのようなテンプレートプラグインを使用することだと思います。

これを使用すると、テーブル全体または配列を指定するだけで必要なものを描画したり、サーバーからのデータを使用してJSONに渡すことができます。

親切にこれらの質問をチェックしてください：

jQueryテンプレートは生の配列にバインドできますか？

jQuery.tmplテンプレートを文字列にレンダリングするにはどうすればよいですか？

詳細については、 jquerytmplのドキュメントを確認することを忘れないでください。

于 2013-03-16T12:03:57.890 に答える