Автоматическая подсветка строк таблицы
 

Народ, плиз помогите чайнику составилть логику сценария для следующей задачи:

Имеется таблица с определенным набором строк (в каждой строке какое-то кол-во ячеек). Надо, чтобы автоматически, сама по себе подсвечивалась (менялся background) сначала первая строка, затем, спустя, допустим, 1000 мс, вторая, затем третья, а при достижении конца таблицы - вновь первая и так до бесконечности...

Это будет выглядеть как то так:

window.onload = function(){
	var n = 5;// кол-во строк таблицы
	var i = 1;
	var tr = document.getElementById('tr'+i);

	setInterval(function(){
		tr.style.backgroundColor = '#ffffff';
		tr = document.getElementById('tr'+i);
		if(i <= n){
			tr.style.backgroundColor = '#eeeeee';
			i++;
			if(i > n) i = 1;
		}
	}, 1000);
}

<table>
	<tr id="tr1">
		<td>1</td><td>Hello World !!!</td>
	</tr>
	<tr id="tr2">
		<td>2</td><td>Hello World !!!</td>
	</tr>
	<tr id="tr3">
		<td>3</td><td>Hello World !!!</td>
	</tr>
	<tr id="tr4">
		<td>4</td><td>Hello World !!!</td>
	</tr>
	<tr id="tr5">
		<td>5</td><td>Hello World !!!</td>
	</tr>
</table>

А можно еще и так...
 

Есть вот такой вариант:

Но тут встала следующая проблема: не получается у меня сделать три разные строки с разными таймаутами... Три функции писать - топорно, и проблема в местах перекрытия цветных строк...

А можно по подробнее описать задачу!? А то перечитав Ваш первый и последний пост запутался окончательно.

Попытаюсь яснее описать задачу. первый этап довольно подробно описал в перов посте (с одной строко) и он уже благополучно решен...

Теперь хочу немного усложнить ту же задачу:

Имеется 1 (одна) таблица с каким-то количеством строк, которое моет меняться со временем (в каждой строке какое-то кол-во ячеек). С момента загрузки страницы вниз, начиная с ТЕХ РАЗНЫХ СЛУЧАЙНО ОПРЕДЕЛЕННЫХ СТРОК, начинают с каким-то промежутком времени (различным для всех трех строк, например, 1000, 2000, 3500 мс) передвигаться три строки (например, синяя, красная, желтая), когда каждая из них доходит до последней строки таблицы, автоматически переходит в начало таблицы.

Такое пока реализовать не могу...
Создание трех разных функций - как вариант?

Используя Ваши наработки сделал следующее:

window.onload = function(){

	function LightRow(el, cur, len, speed, color){
		this.el = el; // массив строк таблицы
		this.cur = cur; // текущая строка
		this.len = len; // кол-во строк в таблице
		this.speed = speed; // скорость анимации
		this.color = color; // цвет подсвечивания строки
	}
			
	LightRow.prototype = {
		animate: function(){
			var _this = this;
			setInterval(function(){
				if(_this.cur >= 0) _this.el[_this.cur].style.background = '#ffffff';
				_this.cur++;
				if(_this.cur >= _this.len) _this.cur = 0;
				if(_this.cur >= 0) _this.el[_this.cur].style.background = _this.color;
			}, this.speed);
		}				
	}

	var tr = document.getElementById('mytable').getElementsByTagName('tr');
	var lenght = tr.length;

	if(lenght > 1){
		var green = new LightRow(tr, -1, lenght, 1000, '#99cc33').animate();
		var yellow = new LightRow(tr, 2, lenght, 500, '#ffff00').animate();
		var red = new LightRow(tr, -1, lenght, 3600, '#ff0000').animate();
	}
}

Используя объект LightRow и его метод animate, Вы теперь сможете, создать сколь угодно таких движущихся строк в таблице.

На счет перекрытия строк даже и не знаю, тут уже дело того совпадет ли по времени подсветка строки или нет.

P.S. С таблицами в которых большое кол-во строк, смотрится даже забавно :D