Question

My example :
http://jsfiddle.net/C7jTg/

var data = [{
  "id": "1",
  "libelle": "1",
  "ordre": "1"
}, {
  "id": "2",
  "libelle": "2",
  "ordre": "2"
}, {
  "id": "3",
  "libelle": "3",
  "ordre": "3"
}, {
  "id": "4",
  "libelle": "4",
  "ordre": "4"
}, {
  "id": "5",
  "libelle": "5",
  "ordre": "5"
}, {
  "id": "6",
  "libelle": "6",
  "ordre": "6"
}, {
  "id": "7",
  "libelle": "7",
  "ordre": "7"
}, {
  "id": "8",
  "libelle": "8",
  "ordre": "8"
}, {
  "id": "9",
  "libelle": "9",
  "ordre": "9"
}, {
  "id": "10",
  "libelle": "10",
  "ordre": "10"
}, {
  "id": "11",
  "libelle": "11",
  "ordre": "11"
}, {
  "id": "12",
  "libelle": "12",
  "ordre": "12"
}, {
  "id": "13",
  "libelle": "13",
  "ordre": "13"
}, {
  "id": "14",
  "libelle": "14",
  "ordre": "14"
}, {
  "id": "15",
  "libelle": "15",
  "ordre": "15"
}, {
  "id": "16",
  "libelle": "16",
  "ordre": "16"
}, {
  "id": "17",
  "libelle": "17",
  "ordre": "17"
}, {
  "id": "18",
  "libelle": "18",
  "ordre": "18"
}, {
  "id": "19",
  "libelle": "19",
  "ordre": "19"
}, {
  "id": "20",
  "libelle": "20",
  "ordre": "20"
}, {
  "id": "21",
  "libelle": "21",
  "ordre": "21"
}, {
  "id": "22",
  "libelle": "22",
  "ordre": "22"
}, {
  "id": "23",
  "libelle": "23",
  "ordre": "23"
}, {
  "id": "24",
  "libelle": "24",
  "ordre": "24"
}];

$('.activiteTable').append("<tr><td align='center' colspan='4'>&nbsp;</td></tr>" +
  "<tr>" +
  "<td align='left' colspan='4'><b>Title:</b></td>" +
  "</tr>");
var rowActivities = '';

$.each(data, function(i, obj) {
  if (i % 4 == 0) {
    rowActivities += "<tr>";
  }

  rowActivities += "<td align='left'>" +
    "<input type='checkbox' id='todo" + i + "' value='" + obj.id + "' class='chBox'/> " + obj.libelle +
    "</td>";

  if ((i % 4 == 0) || (i == 23) && i != 0) {
    rowActivities += "</tr>";
  }


});
$('.activiteTable').append($(rowActivities));

<table cellspacing="3" cellpadding="3" align="left" class="activiteTable" style="clear:both"></table>

I have a problem understanding how work each function when I generate html tr.

I would like extract JSON data in html table like this model:

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

17 18 19 20

21 22 23 24

I don’t know the best practice.
I hope you help me.

Answer 1

You can simplify this by doing this:

var rowActivities = "<tr><td align='center' colspan='4'>&nbsp;</td></tr>"
+ "<tr>"
+ "<td align='left' colspan='4'><b>Title:</b></td>"
+ "</tr>"
+ "<tr>";
$.each(data, function (i, obj) {
    if (i > 0 && i % 4 == 0) {
        rowActivities += "</tr><tr>";
    }
    rowActivities += "<td align='left'>" +
        "<input type='checkbox' id='todo" + i + "' value='" + obj.id + "' class='chBox'/> " + obj.libelle +
        "</td>";
});
rowActivities += "</tr>";
$('.activiteTable').append(rowActivities);

Makes it so you only append to .activeTables once.
There is no need to convert rowActivities in a jQuery object before passing it to the append() method.

http://jsfiddle.net/petersendidit/C7jTg/1/