0

私の例: 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>

HTML tr を生成するときに各関数がどのように機能するかを理解するのに問題があります。

このモデルのような html テーブルで JSON データを抽出したいと思います。

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

17 18 19 20

21 22 23 24

ベストプラクティスがわかりません。あなたが私を助けてくれることを願っています。

4

2 に答える 2

0

フィドルに必要なのは、この行を変更することだけでした (適切な編集を行いました)。

if ((i % 4 == 3) || (i == 23) && i !=0) {

</tr>行の最後にあるときを追加します。これは、インデックスが3、7、11、15などの場合です。

于 2013-02-17T23:47:32.653 に答える
0

これを行うことでこれを簡素化できます。

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

一度だけ追加するようにします.activeTables。メソッドに渡す前に jQuery オブジェクト
を変換する必要はありません。rowActivitiesappend()

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

于 2013-02-17T23:54:46.497 に答える