jquery循環來填寫時間表

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 (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。