Question

我希望有些人知道如何平铺网格。我有一些代码可以开始

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>

Answer 1

以下是您要尝试实现的示例代码。您可以根据自己的需要进行优化。 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>');
    }

}

Answer 2

这适用于任何产品尺寸（偶数或奇数）。希望通过评论使其易于理解

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);

Answer 3

最简单的解决方案是不使用表格。如果你以这种方式安排数据，那么很可能无论如何都不是表格数据。我建议您在元素上使用display: inline-block并使用对您正在使用的数据有意义的HTML元素，例如ul或li。

Answer 4

这适用于偶数或奇数个元素，经过全面测试。

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);

fiddle

平铺的jQuery网格

4 个答案: