0

使用 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>

我想循环 thro arr 并根据它的 date 和 time_booked 在 td 中写入 id。

例如，第一行将使用 date-day='2013-03-15' 和 data-time='09' 转到 td 那么我该如何使用 javascript 来做到这一点？

我想我应该在 tbody 的每个 td 中包含数据日、数据时间吗？或者有更好的方法吗？

目前的做法：

在每个 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 （表头，行头）映射表的方法，还是没有？

4

1 回答 1

1

我认为 jQuery索引功能是您正在寻找的。在下面的代码示例中，我使用它来获取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;
}

还有一个小提琴。

于 2013-03-05T22:31:35.263 回答