Javascript 闪烁的表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14607695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flashing Table Row
提问by charlie
I have a dynamic table, and set conditions to make the table row background color changed based on time comparison. I want to add a second logic that will make the table row flash/blink every 2 seconds if cells are not matching. I understand that I need to create the "Flash/Blink" function but how do I integrate that function into my logic below?
我有一个动态表格，并设置条件使表格行背景颜色根据时间比较而改变。如果单元格不匹配，我想添加第二个逻辑，使表格行每 2 秒闪烁/闪烁一次。我知道我需要创建“Flash/Blink”功能，但如何将该功能集成到下面的逻辑中？
for (i = 0; i < rows.length; i++) {
cells = rows[i].getElementsByTagName('td');
if (cells[10].innerText != cells[11].innterText) {
rows[i].className = "blink/Flash";
}
}
回答by bikeshedder
Look ma, no JavaScript!
看，没有 JavaScript！
HTML
HTML
<table>
<tr>
<td>true</td>
<td class="invalid">false</td>
<td>true</td>
<td>true</td>
</tr>
</table>
CSS
CSS
@-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+ */
}
Live demo
现场演示
http://jsfiddle.net/bikeshedder/essxz/
http://jsfiddle.net/bikeshedder/essxz/
For those poor souls who are forced to use an outdated browser
对于那些被迫使用过时浏览器的可怜人
CSS
CSS
.invalid-blink {
background-color: red;
}
JavaScript
JavaScript
$(function() {
var on = false;
window.setInterval(function() {
on = !on;
if (on) {
$('.invalid').addClass('invalid-blink')
} else {
$('.invalid-blink').removeClass('invalid-blink')
}
}, 2000);
});
Live demo
现场演示
回答by Marco Demaio
Try this:
尝试这个：
<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);
