1

ビューポートの幅に応じて、テーブルを動的に作成し、特定のセル数の行で埋めようとしています。また、ページが読み込まれるときに画面の幅が何であれ調整されることを確認したいと思います（通常の画面サイズだけではありません）。

これが私がこれまでに試したことです。このコードはwindow.onload関数内にあります：

JavaScript

        var table = document.getElementById('instagram_table_body');

        /* Number of elements per row */
        var rowElems = Math.floor(screen.width / 152);

                    /* Number of rows */
        var rowCount = Math.ceil(data.length / rowElems);

        var globalCounter = 0;

        for (var i=0; i<rowCount; i++) {
            var tr = document.createElement('tr');

            for (var j = 0; j < rowElems; j++) {
                var td = document.createElement('td');
                var img = document.createElement('img');
                var a = document.createElement('a');

                a.href = data[globalCounter].images.standard_resolution.url;

                img.src = data[globalCounter].images.thumbnail.url;

                tr.appendChild(td.appendChild(a.appendChild(img)));

                globalCounter++;
            }
            table.appendChild(tr);
        }

問題は、このコードは何も出力せずtr、実際にはテーブル本体に追加されないことです。使用されているデータがそこにあり、有効であることはわかっています(これは AJAX 呼び出しからのものであり、通常の動的テーブルに表示すると正常に機能します。

問題は、子の追加プロセスまたはテーブルに行を追加する瞬間にあるようですが、まだそれを見つけることができません。

注: 私はできるだけ効率的にしようとしています。それが jQuery がない主な理由です。(実際にはandメソッドにのみ使用されます)$.get$.post

JSFiddle

4

2 に答える 2

2

rowElems*rowCountデータ リスト内のアイテムが偶数倍に満たない場合は、データ配列がオーバーランします。

たとえば、配列に 7 つの項目があるが、画面には 6 つしか収まらないとします。要素 [0-5] をループし、テーブル オブジェクトに追加してから、行数を増やします。次に、要素 [6-11] をループしていますが、配列には 7 つのオブジェクトしか含まれていません。

最後のテーブル行のみが表示されないはずです。table.appendChild(tr)データ セットに行が 1 つしかない場合は、 への呼び出しに到達しないため、テーブルには何も表示されません。

また、dom 操作に関する Diodeus のコメントは良いものです。

于 2013-07-15T20:49:43.467 に答える
0

DiodeusとKyleFranshamのヒントに従って、最後の行がクラッシュするのを防ぐ方法を探しましたObject.keys(data).length;。

JSON オブジェクトの長さを取得する変数を作成します。次に、for... inループの最後でglobalCounter、オブジェクトの長さと my が等しいかどうかを確認します。もしそうなら、私はただループから抜け出します！

メソッドの代わりに、自分でパフォーマンスをテストinnerHTMLした後も変更しました。appendChild()

JavaScript

var table = document.getElementById('instagram_table_body');
var elemCount = Object.keys(data).length;
/* Number of elements per row */
var rowElems = Math.floor(screen.width / 152);

/* Number of rows */
var rowCount = Math.ceil(data.length / rowElems);

var globalCounter = 0;

for (var i = 0; i < rowCount; i++) {
    var tr = "<tr>";

    for (var j = 0; j < rowElems; j++) {
        var td = ('<td><a href="' + data[globalCounter].images.standard_resolution.url + '"><img src="' + data[globalCounter].images.thumbnail.url + '"/></a></td>');

        tr += td;

        globalCounter++;

        if (globalCounter == elemCount) break;
    }
    tr += "</tr>";
    table.innerHTML += (tr);
}
于 2013-07-16T12:56:38.990 に答える