![](/img/trans.png)
[英]On Click add Class to First <td> in Row and corresponding <th> in Table
[英]table mapping by th and first td in row to populate from json object
使用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。
例如第一行将转到td,其中date-day ='2013-03-15'和data-time = '09',那么我如何使用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(表头,行头)映射表,否则就没有?
我认为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;
}
和小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.