表格由th和第一個td在行中填充從json對象

Question

使用php echo json array inline我希望js/jquery根據這些數據填充表格。

HTML表格

<table> 
<thead> 
    <tr> 
     <th>Time</th> 
     <th data-day='2013-03-15'>15-3</th> 
     <th data-day='2013-03-16'>16-3</th> 
     <th data-day='2013-03-17'>17-3</th> 
    </tr>  
</thead> 
<tbody> 
<tr data-time='09'> 
    <td>9am</td> 
    <td></td> 
    <td></td> 
    <td></td> 
</tr> 
</tbody> 
</table> 
<script> 
var arr=[ 
{"date":"2013-03-15","id":"4","time_booked":"09:00:00"}, 
{"date":"2013-03-15","id":"1","time_booked":"09:10:00"}, 
{"date":"2013-03-17","id":"5","time_booked":"09:30:00"} 
]; 
$.each(arr,function(){ 
    console.log('id:'+this.id+'inside:'+this.date+'|'+this.time_booked); 
}); 
</script> 

我想環ARR救援人員到場，並根據其日期和time_booked裏面寫TD ID。

例如第一行將轉到td with date-day ='2013-03-15'和data-time = '09' 那麼我該如何使用javascript來做到這一點？

即時思考我應該包括數據日，數據時間內的每個td tbody？還是有更好的方法來做到這一點？

現行辦法：

包括數據天每個TR內，從而TBODY的HTML是

<tr data-time='09'> 
    <td data-day='2013-03-15'></td> 
    <td data-day='2013-03-16'></td> 
etc.. 
</tr> 

然後用js

$.each(arr,function(){ 
    var rday=this.date; 
    var rtime=this.time_booked; 
    var sel='tr[data-hr="'+rtime.substr(0,2)+'"]'; 
    var dom=$(sel).find('td[data-day="'+rday+'"]').first(); 
    if(dom.length)dom.append(this.id); 
}); 

，但我有一種感覺，它的愚蠢！必須有一種方法來使用x，y（表頭，行頭）映射表，還是沒有？

Answer 1

我認爲jQuery index function是你在找什麼。在下面的代碼示例中，我用它來獲取日期的colIndex。在這種情況下，它將獲取表格中的所有th單元格，並使用.index(..)和選擇器查找所需的日期。這給出了你正在尋找的日期的列索引，並從那裏它非常簡單。

var arr=[ 
{"date":"2013-03-15","id":"4","time_booked":"0900"}, 
{"date":"2013-03-15","id":"1","time_booked":"0910"}, 
{"date":"2013-03-17","id":"5","time_booked":"0930"} 
]; 
$.each(arr,function(){ 
    var cell = GetCellByDateAndTime(this.date, this.time_booked); 
    $(cell).text(this.id); 
}); 

function GetCellByDateAndTime(date, time) { 
    var colIndex = $("#BookingsTable th").index($("[data-day='" + date + "']")); 
    var row = $("#BookingsTable tr[data-time='" + time + "']") 
    var cell = $(row).children($("td"))[colIndex]; 
    return cell; 
} 

and a Fiddle。