Javascript 闪动表行

我有一个动态表格，并设置了条件，使表格行的背景颜色根据时间比较而改变。我想添加第二个逻辑，如果单元格不匹配，该逻辑将使表格行每2秒闪烁一次。我知道我需要创建“闪烁/闪烁”功能，但如何将该功能集成到下面的逻辑中

for (i = 0; i < rows.length; i++) {
    cells = rows[i].getElementsByTagName('td');
    if (cells[10].innerText != cells[11].innterText) {
        rows[i].className = "blink/Flash";
    }
}

for（i=0；i

试试这个：

<style type="text/css">
   /* styles to make cells red when under row with class "blink" */
   tr.blink td {background-color:#ff0000;}
</style>

var blinking_rows = []; //array to store rows that must blink

if (cells[10].innerText != cells[11].innterText) 
{
   rows[i].className = "blink"; //this makes cells background color red
   blinking_rows[blinking_rows.length] = rows[i]; //saving row DOM object into array
}

//Running a timer that makes the row blinks every 2 seconds by changing their class
window.setInterval(function() 
{
   for(var i = 0, len = blinking_rows.length; i < len; ++i)
      if(blinking_rows[i].className === "blink") //I'm supposing you do not add other classes
         blinking_rows[i].className = ""; //removing class, this makes the row not red anymore
      else
         blinking_rows[i].className = "blink"; //this makes the row red again
}, 2000);

/*在类为“blink”的行下使单元格变红的样式*/
tr.blink td{背景色：#ff0000；}
变量闪烁_行=[]//数组来存储必须闪烁的行
if（单元格[10].innerText！=单元格[11].innterText）
{
行[i].className=“blink”//这会使单元格的背景色变为红色
闪烁_行[闪烁_行.长度]=行[i]；//将行DOM对象保存到数组中
}
//运行计时器，通过更改其类别使行每2秒闪烁一次
setInterval（函数（）
{
对于（变量i=0，len=blinking_rows.length；i

看，妈，没有JavaScript

HTML 现场演示

---

对于那些被迫使用过时浏览器的可怜人 CSS JavaScript 现场演示

---

这是一个很棒的工具，但不幸的是，它不能在IE 6/7+上工作，这正是我所需要的。我添加了另一个在某种程度上模拟原始CSS的示例。它非常简单，不缓存元素列表。如果你的页面变得非常大，它将是无效的，你应该缓存JQuery选择器。哈哈，是的，我被迫用旧的IE版本开发，但非常感谢！如何将此函数调用到我的行样式中…我当前希望将其放置在此处行[I]。styleclassName=“function”您只需将类

无效

添加到该行。此代码每2秒执行一次simpleE操作，将类

无效闪烁

添加到具有

无效

类的所有元素中，或从所有元素中删除类

无效闪烁

。我将

invalid

类添加到需要稍微修改CSS的行中：

.invalid blink td{background color:red}

<table>
    <tr>
        <td>true</td>
        <td class="invalid">false</td>
        <td>true</td>
        <td>true</td>
    </tr>
</table>

@-webkit-keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
@-moz-keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
@-o-keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
@keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
.invalid {
  -webkit-animation: invalid 1s infinite; /* Safari 4+ */
  -moz-animation:    invalid 1s infinite; /* Fx 5+ */
  -o-animation:      invalid 1s infinite; /* Opera 12+ */
  animation:         invalid 1s infinite; /* IE 10+ */
}

.invalid-blink {
    background-color: red;
}

$(function() {
    var on = false;
    window.setInterval(function() {
        on = !on;
        if (on) {
            $('.invalid').addClass('invalid-blink')
        } else {
            $('.invalid-blink').removeClass('invalid-blink')
        }
    }, 2000);
});