基于时间突出显示行
Highlight Row based on time
我在html中有一个表,我想根据时间突出显示下一个事件。下面是代码
<table cellspacing="0" cellpadding="2" width="300px">
<tbody>
<tr value="05:48">
<td>
<center>Fajr</center>
</td>
<td>
<center><i class="wi wi-horizon"></center></td>
<td><center>5:48</center></td>
</tr>
<tr value="07:01">
<td><center>Sunrise</center></td>
<td><center><i class="wi wi-sunrise"></center></td>
<td><center>7:01</center></td>
</tr>
<tr value="12:43">
<td><center>Dhuhr</center></td>
<td><center><i class="wi wi-day-sunny"></center></td>
<td><center>12:43</center></td>
</tr>
<tr value="15:53">
<td><center>Asr</center></td>
<td><center><i class="wi wi-horizon-alt"></center></td>
<td><center>3:53</center></td>
</tr>
<tr value="18:24">
<td><center>Magrib</center></td>
<td><center><i class="wi wi-sunset"></center></td>
<td><center>6:24</center></td>
</tr>
<tr value="19:39">
<td><center>Isha</center></td>
<td><center><i class="wi wi-moon-full"></center></td>
<td><center>7:39</center></td>
</tr>
</tbody>
</table>
这里是jsfiddle https://jsfiddle.net/zr1332jk/3/
所以如果时间是12:00,它应该突出显示12:43。
基于此:
所以如果时间是12:00,它应该突出显示12:43。
$(function(){
setInterval(function(){
var now = new Date();
var hours = now.getHours();
console.log(hours);
$('table tr').each(function(i,v){
if($(this).attr("value").split(":")[0]==hours)
$(this).addClass("hightlight");
else
$(this).removeClass("hightlight");
});
},1000);
});
.hightlight{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table cellspacing="0" cellpadding="2" width="300px">
<tbody>
<tr value="05:48">
<td><center>Fajr</center></td>
<td><center><i class="wi wi-horizon"></center></td>
<td><center>5:48</center></td>
</tr>
<tr value="07:01">
<td><center>Sunrise</center></td>
<td><center><i class="wi wi-sunrise"></center></td>
<td><center>7:01</center></td>
</tr>
<tr value="12:43">
<td><center>Dhuhr</center></td>
<td><center><i class="wi wi-day-sunny"></center></td>
<td><center>12:43</center></td>
</tr>
<tr value="15:53">
<td><center>Asr</center></td>
<td><center><i class="wi wi-horizon-alt"></center></td>
<td><center>3:53</center></td>
</tr>
<tr value="18:24">
<td><center>Magrib</center></td>
<td><center><i class="wi wi-sunset"></center></td>
<td><center>6:24</center></td>
</tr>
<tr value="19:39">
<td><center>Isha</center></td>
<td><center><i class="wi wi-moon-full"></center></td>
<td><center>7:39</center></td>
</tr>
<tr value="17:15">
<td><center>TEST</center></td>
<td><center><i class="wi wi-moon-full"></center></td>
<td><center>17:15</center></td>
</tr>
</tbody>
</table>
相关文章:
- 显示时间的脚本
- 如何用前导零显示时间
- 如何在烛光图表中添加/显示时间框架
- 如何在页面上显示时间、日期IP和URL?更新日期:2015年2月25日
- 在条件中的几个时间行中设置自定义css效果后,从Jquery时间选择器显示时间
- 在指定时间中添加 24 小时后在网页上显示时间 x
- 如何像这样显示时间,例如:1秒前,1分钟前,1小时前,1个月前
- j查询日期选取器不显示时间输入值
- JavaScript 和 JQuery:在文本框中显示时间
- 给定一个时间戳,如何按天/周/月显示时间
- 为什么不显示时间
- 显示时间而不是日期的图表
- 根据天数和月数显示时间戳
- 如何在 Javascript 中显示时间
- 如果午夜使用时刻.js,则不显示时间
- 是否可以筛选 JSON 源以仅显示时间戳字符串中的时间
- 检查后显示时间选择器复选框,导轨(Redmine)
- 设置showErrorMessage()的显示时间
- 以12小时格式显示时间
- 日期时间倒计时,删除小数,并在每个类别中保留时间显示时间