根据时间突出显示行

Question

我在html中有表格，我想根据时间突出显示下一个事件。这是代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是jsfiddle https://jsfiddle.net/zr1332jk/3/

因此，如果时间是12:00，则应突出显示12:43。

Answer 1

基于此：

  

因此，如果时间是12:00，则应突出显示12:43。

＆＃13;

＆＃13;

$(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);
});

＆＃13;

.hightlight{
    background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;