javas промяна на редовете на таблицата на цвета на фона динамично за setinterval - javascript, jquery, setinterval

Променям фона на редовете динамично за 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);
});

Отговори:

1 за отговор № 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";
}
}
}

[редактиране] ... след като е изчистено какво иска да направи ОП: http://jsfiddle.net/bzWV2/1/

[Edit2] ... по-лесен подход: http://jsfiddle.net/bzWV2/2/

---

0 за отговор № 2

Можете да направите нещо подобно:

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

ДЕМОНСТРАЦИЯ

---

0 за отговор № 3

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/

---