添加選框效果到表中有紅色背景的行

Question

我有一個7行和2個選項卡的表格，用於星期日和星期一。它會根據當前時間以紅色突出顯示特定行。 我想知道是否有可能

<marquee>My first Row</marquee> 

效果添加到其被突出顯示與紅色背景和當第二行被高亮顯示，然後自動選取框效果移動到該行的特定行。

這裏是我的表的代碼

function openCity(evt, cityName, today) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = 
 
    document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    if (typeof today == 'undefined') { 
 
    evt.currentTarget.className += " active"; 
 
    } else { 
 
    tablinks[today].className += " active"; 
 
    } 
 
} 
 

 
let now = new Date().getHours() * 100 + new 
 
Date().getMinutes(); 
 
let times = [900, 1000, 1015]; 
 
let classes = ['ra1', 'ra3', ]; 
 
let selected = classes[times.reduce((acc, curr, idx) => now >= 
 
    curr ? idx : acc)]; 
 
if (selected){ 
 
    var elements = document.getElementsByClassName(selected); 
 
    for(var i=0;i<elements.length; i++){ 
 
     elements[i].style.background = 'red'; 
 
     elements[i].innerHTML = "<marquee>" + elements[i].innerHTML + "</marquee>"; 
 
} 
 
}

.tabcontent { display: none }

<div class="tab" style="margin-top: 1.6%; "> 
 
    <button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button> 
 

 
</div> 
 

 
<div id="Sun0" class="tabcontent" id="np"> 
 

 

 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div> 
 

 

 
<div id="Mon0" class="tabcontent"> 
 

 
    <!--Monnday--> 
 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>