la tabla de cambio de JavaScript alinea el color de fondo dinámicamente para setinterval - javascript, jquery, setinterval

Cambio el fondo de las filas a dinámicamente para setinterval pero no funciona.

si hace clic en el botón, cambie el nombre de la clase como las filas de la tabla.

Mis códigos:

Código HTML:

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

Códigos CSS

.red { background-color: red; }

Códigos 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);
});

Respuestas

1 para la respuesta № 1

restablece todas las demás líneas, excepto la última fila con la función "sec".

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

elimina esa parte y debería funcionar como quisieras

... difícil, no entiendo lo que quieres hacer, ya que todo lo que estás haciendo es configurar todos los fondos de las filas ... si quieres restablecer los rojos, no uses tu función sec () ... intente esto en su lugar:

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

[editar] ... después de aclarar lo que OP quería hacer: http://jsfiddle.net/bzWV2/1/

[editar2] ... enfoque más fácil: http://jsfiddle.net/bzWV2/2/

---

0 para la respuesta № 2

Podrías hacer algo así:

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

MANIFESTACIÓN

---

0 para la respuesta № 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/

---