javascript - javascript为setinterval动态更改表行背景颜色

Question

我将行的背景更改为动态设置间隔但不工作。

如果单击按钮，则将类名称更改为表中的行。

我的代码：

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); 
});

Answer 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/

Answer 2

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/

Answer 3

你可以这样做：

var $table = $("#table");
var $rows = $table.find("tr");    
var func = function(){
        var curIndex = $rows.filter('.red').index(),
            nextIndex = curIndex === $rows.length - 1?0:++curIndex;
        $rows.eq(nextIndex).addClass('red').siblings().removeClass('red');
    }


    $('#btn').click(function(){
        $rows.eq(0).addClass('red');
        setInterval(func, 2000); 
    });

演示