平铺的jQuery网格

我希望有人能知道如何平铺网格。我有一些代码上手平铺的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>

来源

2011-11-24 ONYX

这适用于任何产品尺寸（偶数或奇数）。希望与意见可以很容易地理解

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

来源

2011-11-24 23:40:58 sandino

对于奇数个元素（最后一个索引将是偶数），这将错过结尾''。 – jli

你是对的，但我编辑它，但没有出现变化，变化是：if（i％2！= 0 ||（i == products.length-1）） – sandino

这里是你想达到什么样的一个示例代码。您可以优化它以满足您的需求。 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>'); 
    } 

}

来源

2011-11-24 23:30:34 Pierre

这将导致为奇数元件的无效的标记。 – jli

这就是为什么我的答案有**你可以优化它以满足您的需求**部分。 – Pierre

最简单的办法就是根本不使用表。如果你以这种方式安排数据，很可能会出现这种情况，它不是表格数据。我建议在您的元素上使用display: inline-block，并使用对您使用的数据有意义的HTML元素，例如ul或li。

来源

2011-11-24 23:49:26 bloudermilk

这将适用于偶数或奇数元素，经过充分测试。

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

来源

2011-11-24 23:54:06 jli

平铺的jQuery网格

回答

相关问题