javascript - json オブジェクトから入力する行の th と最初の td によるテーブル マッピング

Question

PHP を使用して json 配列をインラインでエコーする 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 を書き込みます。

たとえば、最初の行は date-day='2013-03-15' および data-time='09' で td に移動するため、javascript を使用してこれを行うにはどうすればよいですか?

tbody の各 td 内に data-day,data-time を含めるべきだと思いますか? またはそれを行うためのより良い方法はありますか?

現在のアプローチ:

各 tr 内に data-day を含めるので、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 (テーブル ヘッド、行ヘッド) を使用してテーブルをマップする方法が必要ですか、それともありませんか?