タイル張りのjQueryグリッド

私はいくつかのグリッドを並べる方法を知っていることを期待していた。私はいくつかのコードを開始する

1 | 2
3 | 4
5 | 6

私のajax関数

$.ajax({
  complete:function(result) {
     //in here i want to tile across two sets of td's for each tr
      for(var i = 0; i < products.length; i++) {
          $('#products').append('<tr><td>' + products[i].Title + '</td></tr>');
      }
  }
});  
<table id="products"></table>
2

4 答え

最も簡単な解決策は、単にテーブルを使用しないことです。とにかくこのようにデータを整理している場合は、表データではない可能性があります。 ul li のように、要素に display:inline-block を使用し、/code>

2
追加された

Here is a sample code of what you are trying to achieve. You can optimize it to suit your needs. Fiddle

for(var i = 0, y=0; i < 10; i++){

    if(y == 0){
        $('table').html($('table').html() + '<tr>');
    }

    $('table').append('<td>' + i + '</td>')

    y++;

    if( y == 2 ){
        y = 0;
        $('table').html($('table').html() + '</tr>');
    }

}
2
追加された
そのため私の答えはニーズに合わせて最適化できますという部分があります。
追加された 著者 Pierre,
これにより、奇数の要素に対して無効なマークアップが発生します。
追加された 著者 jli,

これは、製品のサイズが(偶数か奇数か)どんなものでも動作します。 コメントがあれば分かりやすくなります

var table_body = '< tbody>';
for(var i = 0; i < products.length; i++) {
    if(i%2==0)//if even we open a row
         table_body += '<tr>';

    //We always put a value  
    table_body += '<td>' + products[i].Title + '</td>';

    if(i%2!=0 || (i==products.length-1))//if odd we close a row
         table_body += '</tr>';

}

table_body += '< /tbody>';
$('#products').append(table_body);
2
追加された
あなたが正しいですが、私はそれを編集しましたが、変更は表示されません、変更は:if(i%2!= 0 ||(i == products.length-1))
追加された 著者 sandino,
これにより、奇数の要素の最後の <tr> がなくなります(最後のインデックスは偶数になります)。
追加された 著者 jli,

これは完全にテストされた偶数または奇数の要素に対して機能します。

var tbl = "";
for (var i = 0; i < products.length; ++i) {
    if (i % 2 == 0) tbl += '<tr>';
    tbl += '<td>' + products[i].Title + '</td>';
    if (i % 2 == 1) tbl += '</tr>';
}
if (i % 2 == 1) tbl += '</tr>';
$("#products").append(tbl);

フィドル

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript