CODEWITHSUNDEEP
javascriptjquery
ONYX
ONYX

Reputation: 5859

jQuery grid that is tiled

I was hoping some would know how to tile a grid across. I have some code to get started

1 | 2
3 | 4
5 | 6

and in my ajax function

$.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>

Upvotes: 2

Views: 379

Answers (4)

sandino
sandino

Reputation: 3842

This works whatever the products size is (even or odd). Hope with comments make it easy to understand

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

Upvotes: 2

jli
jli

Reputation: 6623

This will work for even or odd numbers of elements, fully tested.

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

Upvotes: 1

bloudermilk
bloudermilk

Reputation: 18109

The simplest solution is to simply not use a table. Chances are if you're arranging data this way, it's not tabular data anyway. I recommend using display: inline-block on your elements and using an HTML element that makes sense for the data you're using, like a ul or li.

Upvotes: 2

Pierre
Pierre

Reputation: 19071

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

}

Upvotes: 2

Related Questions