Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Автоматическая подсветка строк таблицы (https://javascript.ru/forum/dom-window/2682-avtomaticheskaya-podsvetka-strok-tablicy.html)

mihha 31.01.2009 14:00

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

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

Zibba 31.01.2009 18:07

Это будет выглядеть как то так:
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>

mihha 31.01.2009 20:41

А можно еще и так...
 
Есть вот такой вариант:
Код:

<script>
function lightrow(el, len, cur) {
    if(cur >= 0) el[cur].style.background = '#ffffff';
    cur++;
    if(cur >= len) { cur = 0; }
    if(cur >= 0) el[cur].style.background = '#f76341';
    setTimeout(function(){lightrow(el, len, cur)}, 3400);
}
var tr = document.getElementById('mytable').getElementsByTagName('tr');
var trl = tr.length;
if(trl > 1) lightrow(tr, trl, -1);
</script>

<table id="mytable">.....


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

Zibba 31.01.2009 20:48

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

mihha 31.01.2009 22:20

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

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

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

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

Zibba 01.02.2009 00:28

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

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


Часовой пояс GMT +3, время: 11:24.