Question

我正在构建一个可以创建时间表的小页面。

我每天都有特定时间的空格，并在html中为它们提供了唯一的ID：

<caption>Schedule</caption>
    <tr><th></th><th>09</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th></tr>
    <tr><th>Mon</th><td id='mon09'></td><td id='mon10'></td><td id='mon11'></td><td id='mon12'></td><td id='mon13'></td><td id='mon14'></td><td id='mon15'></td><td id='mon16'></td></tr>
    <tr><th>Tue</th><td id='tue09'></td><td id='tue10'></td><td id='tue11'></td><td id='tue12'></td><td id='tue13'></td><td id='tue14'></td><td id='tue15'></td><td id='tue16'></td></tr>
    <tr><th>Wed</th><td id='wed09'></td><td id='wed10'></td><td id='wed11'></td><td id='wed12'></td><td id='wed13'></td><td id='wed14'></td><td id='wed15'></td><td id='wed16'></td></tr>
    <tr><th>Thu</th><td id='thu09'></td><td id='thu10'></td><td id='thu11'></td><td id='thu12'></td><td id='thu13'></td><td id='thu14'></td><td id='thu15'></td><td id='thu16'></td></tr>
    <tr><th>Fri</th><td id='fri09'></td><td id='fri10'></td><td id='fri11'></td><td id='fri12'></td><td id='fri13'></td><td id='fri14'></td><td id='fri15'></td><td id='fri16'></td></tr>

我在jQuery中编写了一个函数，该函数将使用特定的时间表信息从数据库返回JSON格式的数据，这是返回的数据（例如）：

{
   "SITS_MOD_CODE":"SET08101",
   "yr":"2013/4",
   "SITS_MOD_NAME":"Web Technologies",
   "tri":"tr2",
   "SITS_MOD_CRDT":"20.00",
   "SITS_MOD_LEADER":"MR COLIN DOUGALL",
   "SITS_LEV_CODE":"08",
   "desc":"Web Technologies",
   "events":[
      {
         "staff":[
            "Mr Andrew Cumming",
            "Mr Peter Cruickshank"
         ],
         "duration":2,
         "rooms":[
            "M.Kilby.01",
            "M.Kilby.02"
         ],
         "day":"Thu",
         "students":[
            "co.cC2f-b"
         ],
         "id":"SET08101.P1c",
         "type":"Practical",
         "weeks":[
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13
         ],
         "start":"09:00",
         "slot":"thu09"
      },
      {
         "staff":[
            "Mr Andrew Cumming",
            "Mr Peter Cruickshank"
         ],
         "duration":2,
         "rooms":[
            "M.Kilby.01",
            "M.Kilby.02"
         ],
         "day":"Thu",
         "type":"Practical",
         "id":"SET08101.P1b",
         "students":[
            "co.cCS&N2f",
            "co.cWT2f"
         ],
         "weeks":[
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13
         ],
         "slot":"thu13",
         "start":"13:00"
      },
      {
         "staff":[
            "Mr Andrew Cumming",
            "Mr Peter Cruickshank"
         ],
         "duration":2,
         "rooms":[
            "M.Kilby.03",
            "M.Kilby.04"
         ],
         "day":"Wed",
         "type":"Practical",
         "id":"SET08101.P1a",
         "students":[
            "co.cC2f-a"
         ],
         "weeks":[
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13
         ],
         "slot":"wed10",
         "start":"10:00"
      },
      {
         "staff":[
            "Mr Andrew Cumming",
            "Mr Peter Cruickshank"
         ],
         "duration":1,
         "rooms":[
            "Merch.F12"
         ],
         "day":"Wed",
         "type":"Lecture",
         "id":"SET08101.L2",
         "students":[
            "co.cC2f-a",
            "co.cC2f-b",
            "co.cCS&N2f",
            "co.cWT2f"
         ],
         "weeks":[
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13
         ],
         "slot":"wed09",
         "start":"09:00"
      },
      {
         "staff":[
            "Mr Andrew Cumming",
            "Mr Peter Cruickshank"
         ],
         "duration":1,
         "rooms":[
            "Merch.H5"
         ],
         "day":"Wed",
         "type":"Lecture",
         "id":"SET08101.L1",
         "students":[
            "co.cC2f-a",
            "co.cC2f-b",
            "co.cCS&N2f",
            "co.cWT2f"
         ],
         "weeks":[
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13
         ],
         "slot":"wed14",
         "start":"14:00"
      }
   ],
   "SITS_DPT_CODE":"E20",
   "institution":"UnE"
}

所以我的问题是 - 如何创建一个循环来循环数据（事件）并将其输入到适当的HTML标签中以便创建时间表？

非常感谢

Answer 1

你可以像这样使用for循环：

for (var key in data.events) { //do something here with data.events[key] };

请参阅此example。

或者你可以像这样使用jQuery方式：

$.each(data.events, function (index, event) {
   // do stuff with event
});

请参阅此example。

如果您想将数据放入表中，您可以这样做：

$.each(data.events, function (index, event) {
    var slot = $('#' + event.slot);
    if (index === 0) {
        $.each(event, function (key, value) {
            slot.append('<div>' + key + ': ' + value + '</div>')
        });
    }
});

请参阅此示例here。

Jquery循环填写时间表

1 个答案: