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>

Answer 1

由于marquee元素已过时，您将不得不依赖css动画或第三方插件来实现，

使用css你可以分配css类（对于ex：marquee），在那里你将红色背景分配给行，在那个类上你可以写下css：

.marquee {
    width: 750px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee td {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    animation: marquee 15s linear infinite;
}

.marquee td:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

<table>
  <tr>
    <td>test 1</td>
    <td>test 2</td>
  </tr>
   <tr class="marquee">
    <td>test 4</td>
    <td>test 5</td>
  </tr>
</table>

将Marquee效果添加到具有红色背景的表中的行

1 个答案: