0

setinterval の行の背景を動的に変更しますが、機能しません。

ボタンをクリックすると、クラス名がテーブルの行として変更されます。

私のコード:

HTML コード:

<table id="table">
<tr>
    <td>AAA11</td>
    <td>BBB11</td>
</tr>
..
..
</table>
<button id="btn">click</button>

CSS コード

.red { background-color: red; }

JS コード

var table = document.getElementById("table");
var rows = table.getElementsByTagName("tr");

//  My func
function func(){
    for (var i = 0; i < rows.length; i++) {
        var index=0;
        var c = rows[i].className;
            if(c!="red") {
                index=i;
            } else {
            index = i+1;
            }
        sec(index);
    } 
    setInterval(func(), 2000);   
}
// Change class name the rows 
function sec(index){
    for (var i = 0; i < rows.length; i++) {
        if(index==i) {            
            rows[index].className="red";
        } 
        if(index!=i ){
            rows[index].className="null";
        }
    }
}

$('#btn').click(function(){
    setInterval(func(), 2000); 
});
4

3 に答える 3

1

「sec」関数の最後の行を除いて、他のすべての行をリセットします。

if(index!=i ){
    rows[index].className="null";
}

その部分を削除すると、希望どおりに機能するはずです

...すべての行の背景を設定しているだけなので、やりたいことがわかりません...赤い背景をリセットしたい場合は、sec()関数を使用しないでください...代わりにこれを試してください：

function func(){
    for (var i = 0; i < rows.length; i++) {
        var index=0;
        var c = rows[i].className;
        if(c=="red") {
            rows[i].className="";
        } else {
            rows[i].className="red";
        }
    } 
}

[編集] ...OPがやりたいことをクリアした後: http://jsfiddle.net/bzWV2/1/

[edit2] ...より簡単なアプローチ: http://jsfiddle.net/bzWV2/2/

于 2013-09-16T13:33:06.843 に答える
0 
function highlight(element)
{
    $('tr').removeClass('red');

    el = (!element)? $('tr:first') : element;
    el.addClass('red');
    next_el = el.next('tr');
    var el = (next_el.length == 0)? $('tr:first'): next_el;
    setTimeout(function(){ highlight(el) }, 1000);
}

setTimeout(function(){ highlight() }, 1000);

http://fiddle.jshell.net/TFcUS/2/

于 2013-09-16T13:25:07.603 に答える