6

動的テーブルがあり、時間比較に基づいてテーブル行の背景色を変更する条件を設定しています。セルが一致しない場合にテーブルの行を 2 秒ごとに点滅/点滅させる 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";
    }
}
4

2 に答える 2

34

JavaScript はありません。

HTML

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

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+ */
}

ライブデモ

http://jsfiddle.net/bikeshedder/essxz/

時代遅れのブラウザを使わざるを得ない哀れな人々のために

CSS

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

JavaScript

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

ライブデモ

http://jsfiddle.net/bikeshedder/SMwAn/

于 2013-01-30T16:07:06.267 に答える
2

これを試して：

<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);
于 2013-01-30T15:57:13.517 に答える