Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2009, 14:00
mihha
 
Сообщений: n/a

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

Имеется таблица с определенным набором строк (в каждой строке какое-то кол-во ячеек). Надо, чтобы автоматически, сама по себе подсвечивалась (менялся background) сначала первая строка, затем, спустя, допустим, 1000 мс, вторая, затем третья, а при достижении конца таблицы - вновь первая и так до бесконечности...
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2009, 18:07
...
Отправить личное сообщение для Zibba Посмотреть профиль Найти все сообщения от Zibba
 
Регистрация: 13.10.2008
Сообщений: 225

Это будет выглядеть как то так:
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>
Ответить с цитированием
  #3 (permalink)  
Старый 31.01.2009, 20:41
mihha
 
Сообщений: n/a

А можно еще и так...
Есть вот такой вариант:
Код:
<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">.....

Но тут встала следующая проблема: не получается у меня сделать три разные строки с разными таймаутами... Три функции писать - топорно, и проблема в местах перекрытия цветных строк...
Ответить с цитированием
  #4 (permalink)  
Старый 31.01.2009, 20:48
...
Отправить личное сообщение для Zibba Посмотреть профиль Найти все сообщения от Zibba
 
Регистрация: 13.10.2008
Сообщений: 225

А можно по подробнее описать задачу!? А то перечитав Ваш первый и последний пост запутался окончательно.
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2009, 22:20
mihha
 
Сообщений: n/a

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

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

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

Такое пока реализовать не могу...
Создание трех разных функций - как вариант?
Ответить с цитированием
  #6 (permalink)  
Старый 01.02.2009, 00:28
...
Отправить личное сообщение для Zibba Посмотреть профиль Найти все сообщения от Zibba
 
Регистрация: 13.10.2008
Сообщений: 225

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

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. С таблицами в которых большое кол-во строк, смотрится даже забавно
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Конвертация txt таблицы в html gaiver Общие вопросы Javascript 95 09.03.2009 21:19
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 19.12.2008 23:35
Постраничный вывод таблицы R2D2 Элементы интерфейса 5 20.10.2008 21:53
Электронные таблицы на JS gagagogo Элементы интерфейса 27 17.09.2008 21:07
поменять цвет у нескольких строк в таблице Root Элементы интерфейса 4 21.04.2008 09:30