tabela zmian javascript dynamicznie wierszy kolor tła dla setinterval - javascript, jquery, setinterval

Zmieniam tło wierszy na dynamicznie dla setinterval, ale nie działa.

jeśli klikniesz przycisk, zmień nazwę klasy na wiersze w tabeli.

Moje kody:

Kod HTML:

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

Kody CSS

.red { background-color: red; }

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

Odpowiedzi:

1 dla odpowiedzi № 1

resetujesz wszystkie inne wiersze, z wyjątkiem ostatniego wiersza w funkcji „sec”.

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

usuń tę część i powinno działać tak, jak chciałeś

... trudno, nie rozumiem tego, co chcesz, ponieważ wszystko, co robisz, to ustawianie tła wszystkich wierszy ... jeśli chcesz zresetować czerwone, nie używaj funkcji sec () ... spróbuj tego zamiast tego:

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

[edytować] ... po wyczyszczeniu tego, co OP chciał zrobić: http://jsfiddle.net/bzWV2/1/

[edit2] ... łatwiejsze podejście: http://jsfiddle.net/bzWV2/2/

---

0 dla odpowiedzi nr 2

Możesz zrobić coś takiego:

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

PRÓBNY

---

0 dla odpowiedzi № 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/

---