title: Add Marquee effect to row in table which have Red Background
body: <p>I have an table with 7 rows for and 2 tabs for Sunday and  Monday. It will highlight with red color the particular row based on current time. 
  I was wondering if it was possible to add </p>
  
  <pre><code>&lt;marquee&gt;My first Row&lt;/marquee&gt;
  </code></pre>
  
  <p>effect to the particular row which is highlighted with red background and when second row is highlighted then automatically marquee effect moves to that row. </p>
  
  <p>Here is the code for my table </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openCity(evt, cityName, today) {
    var i, tabcontent, tablinks;
    tabcontent =
      document.getElementsByClassName("tabcontent");
    for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i &lt; 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) =&gt; now &gt;=
    curr ? idx : acc)];
  if (selected){
    var elements = document.getElementsByClassName(selected);
    for(var i=0;i&lt;elements.length; i++){
        elements[i].style.background = 'red';
        elements[i].innerHTML = "&lt;marquee&gt;" + elements[i].innerHTML + "&lt;/marquee&gt;";
   }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tabcontent { display: none }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab" style="margin-top: 1.6%;  "&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Sun0') "&gt;Sun&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Mon0')"&gt;Mon&lt;/button&gt;
  
  &lt;/div&gt;
  
  &lt;div id="Sun0" class="tabcontent" id="np"&gt;
  
  
    &lt;div style="overflow-x:auto;"&gt;
      &lt;table&gt;
        &lt;col width="65%"&gt;
        &lt;col width="35%"&gt;
        &lt;tr&gt;
          &lt;th&gt;Class&lt;/th&gt;
          &lt;th&gt;Time&lt;/th&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td class="ra1"&gt;10:15-11:00AM&lt;/td&gt;
          &lt;td style="background:black; color:Yellow;"&gt;It is Sunday &lt;/td&gt;
  
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="ra3"&gt;11:00-11:45AM&lt;/td&gt;
          &lt;td style="background:black; color:Yellow;"&gt;It is Sunday&lt;/td&gt;
  
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="Mon0" class="tabcontent"&gt;
  
    &lt;!--Monnday--&gt;
    &lt;div style="overflow-x:auto;"&gt;
      &lt;table&gt;
        &lt;col width="65%"&gt;
        &lt;col width="35%"&gt;
        &lt;tr&gt;
          &lt;th&gt;Class&lt;/th&gt;
          &lt;th&gt;Time&lt;/th&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td class="ra1"&gt;10:15-11:00AM&lt;/td&gt;
          &lt;td style="background:black; color:Yellow;"&gt;It is Monday&lt;/td&gt;
  
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="ra3"&gt;11:00-11:45AM&lt;/td&gt;
          &lt;td style="background:black; color:Yellow;"&gt;It is Monday&lt;/td&gt;
  
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>