Выделение всей строки в таблице

Статус
Закрыто для дальнейших ответов.

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Здравствуйте! С первой задачей у меня получилось справиться (Обработка формы form (input)). Теперь хочу сделать удобочитаемую таблицу.
Суть такова: когда наводишь мышью на ячейку - выделяется вся строка(в которой эта ячейка). как я понял из книжки это делается событиями мыши onMouseOver="f_();" onMouseOut="f_();". И у меня получилось:

HTML
Код:
<table>
<tr>
  <td id="td11" onMouseOver="f_over();" onMouseOut="f_out();">11</td>
  <td id="td12" onMouseOver="f_over();" onMouseOut="f_out();">12</td>
</tr>
<tr>
  <td id="td21" onMouseOver="f_over();" onMouseOut="f_out();">21</td>
  <td id="td22" onMouseOver="f_over();" onMouseOut="f_out();">22</td>
</tr>
</table>
JS
Код:
function f_over() { var p01 = document.getElementById(???).style; p01.backgroundColor = "#cccccc"; }
function f_out() { var p02 = document.getElementById(???).style; p02.backgroundColor = ""; }
Всё работает, но в этом случае надо писать столько функций, сколько ячеек в таблице!!!

И вот мой первый вопрос: Как обяснить функции, что надо 'расскрасить' (p01.backgroundColor = "#cccccc") ту ячейку, которая вызвала эту функцию?
 

ALEXu

в сером
Регистрация
29.12.2010
Сообщения
307
Код:
<table>
<tr>
  <td id="td11" onMouseOver="f_over(this);" onMouseOut="f_out(this);">11</td>
  <td id="td12" onMouseOver="f_over(this);" onMouseOut="f_out(this);">12</td>
</tr>
<tr>
  <td id="td21" onMouseOver="f_over(this);" onMouseOut="f_out(this);">21</td>
  <td id="td22" onMouseOver="f_over(this);" onMouseOut="f_out(this);">22</td>
</tr>
</table>
JS
function f_over(td) { var td.style.backgroundColor = "#cccccc"; }
function f_out(td) { var td.style.backgroundColor = ""; }
А можно сделать еще проще перебрать getElementsByTag('td') циклом и присвоить onmouseover/out, и не писать их в тегах вообще.
Код:
var arr_td=document.getElementById("таблица").getElementsByTagName('td');
for(var i=0;i<arr_td.length;i++){
	arr_td[i].onmouseover=function(){
				f_over(this);
   }
}
 

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
[member=ALEXu], твой первый способ работает! ))) Буду знать!

Но я в итоге хочу сделать "подсветку" таблицы таким образом: (проще нарисовать в Photoshop, чем обяснить на словах):



Мне кажется это удобно, если таблица большая и сложная (с обеденением ячеек). Что вы можете сказать об этой идее? Это удобно?
Есть мысли как это реализовать?
 

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
На данный момент не могу решить задачу с TABLE заменил на DIV'ы - получилось круто (ну, я так считаю), правда, код получился больше. Это первая часть таблицы. Думаю не стоит цитировать всю таблицу, поэтому дам ссылки на страницы, где я эксперементирую (убрал все лишние теги):
http://nng10.ru/pr01.php - HTML
http://nng10.ru/js/price.js - JavaScript
http://nng10.ru/css/price.css - CSS

Код:
<div class="layer4" onMouseOver="f_layer4_over(this);" onMouseOut="f_layer4_out(this);">
  <div class="layer3left">A4<div class="a4"></div></div>
  <div class="layer3" onMouseOver="f_layer3_over(this);" onMouseOut="f_layer3_out(this);">
   <div class="layer2left">Ч/Б</div>
   <div class="layer2" onMouseOver="f_layer2_over(this);" onMouseOut="f_layer2_out(this);">
	<div class="layer1left">бумага</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">2</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">2 - 6</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">6 - 8</div>
   </div>
   <div class="layer2" onMouseOver="f_layer2_over(this);" onMouseOut="f_layer2_out(this);">
	<div class="layer1left">ватман</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">4</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">6 - 8</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">8 - 12</div>
   </div>
   <div class="layer2" onMouseOver="f_layer2_over(this);" onMouseOut="f_layer2_out(this);">
	<div class="layer1left">фотобумага</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">6</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">8 - 10</div>
	<div class="layer1" onMouseOver="f_layer1_over(this);" onMouseOut="f_layer1_out(this);">10 - 15</div>
<!-- И Т Д - полный код смотри по ссылке выше -->
1-й вопрос: Может есть идеи как сделать попроще? Или может я зря переживаю, нормальный код?
 

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Здравствуйте! Опять подниму вопрос реализации этой идеи...

С помощью DIV'ов не получилось...
Меня справедливо раскритиковали в теме Умная подсветка строки таблицы.

Делаю с помощью TABLE... Сделаю - результат продемонстрирую...

Сейчас хочу задать такой вопрос:
Код:
document.getElementById("idi").style.backgroundColor = "#eaeaea"
//ЧТО, ЕСЛИ В HTML НЕТ ЭЛЕМЕНТА С ТАКИМ ID
Что будет, если JavaScript не найдет элемент, который нужно раскрасить в цвет "#eaeaea". Т.е. такого элемента не существует!
Это ошибка в коде?
 

Aristotel

Well-Known Member
Регистрация
14.04.2011
Сообщения
213
теоретически, с точки зрения пользователя, он различая не увидит, но если вы например пользуетесь хромом, то в консоли вы увидите ошибку о том что он не может найти элемент с таким именем.
 
  • Like
Реакции: vla

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Да. Будет ошибка и интерпретатор javascript прекратит работу (то есть - на этом выполнение сценариев закончится)

Если есть вероятность отсутствия такого элемента, то нужно проверять, например:
Код:
var element = document.getElementById("idi");
// здесь ошибки еще не будет, просто element будет иметь значение undefined (если нет нужного элемента)

if (element) {
	element.style.backgroundColor = "#eaeaea";
    // а эта строка просто не выполнится при отсутствии нужного элемента
}
А лучше всего - использовать jQuery:
Код:
$("#idi").css('backgroundColor', '#eaeaea');
Здесь ошибки (и, следовательно, остановки) не будет даже и при отсутствии элемента с id="idi".
 
  • Like
Реакции: vla

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
А лучше всего - использовать jQuery:
[member=tigra60], это след. этап... Наоборот приходится себя контролировать, чтобы не хвататься за "всеподряд". А то буду как герой стиха от леди [member=Helga] "В воскресенье, ровно в 10, стал учить HTML..."

Думаю эту задачу я решу на чистом JS!

И еще одну тонкость хотелось-бы уточнить:
если функция раскрашивает один и тотже элемент несколько раз - это ошибка?
схема примерно такая:
Код:
function f_f() {
//---код---
document.getElementById(mass[iii]).style.backgroundColor = "#eaeaea"
//---код---
document.getElementById(mass[iii]).style.backgroundColor = "#d5d5d5"
//---код---
document.getElementById(mass[iii]).style.backgroundColor = "#c0c0c0"
//---код---
}
 

Aristotel

Well-Known Member
Регистрация
14.04.2011
Сообщения
213
я вам советую пользоваться хромом или мозилой, в них есть консоль с помощью которой возможно увидеть ошибки js.
код который вы написали: по идее таким образом делают эффект перехода из прозрачности в обычный и наоборот (в смысле каждую долю секунды меняется стиль) или выпадающее меню из мелкого размера растягивается постепенно. ошибки быть не должно.
но я бы вам посоветовал постараться не делать так если это возможно, поскольку пользователь будет быстро возить мышью и не известно в каком цвете может зависнуть таблица, как каждый браузер будет это будет отображать.
опять же, я начинающий в этом деле так что смотрите сами.
 
  • Like
Реакции: vla

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
если функция раскрашивает один и тотже элемент несколько раз - это ошибка?
Синтаксически - нет, не ошибка. Но не забывайте об ошибках логических. Их вам ни одна консоль не отловит.

Еще один совет. Я при отладке очень активно использую функцию alert(). Если переменная, которую вы передаете этой функции физически не имеет значения, то есть является объектом, то функция выведет её тип. Например:
Код:
alert(document);
// получим [object HTML document]
alert(document.getElementById('block'));
// если это div id=block, то получим [object HTMLDivElement], а если такого элемента нет, будет null
alert(document.getElementById('block').style);
// покажет [object CSSStyleDeclaration], а если такого блока нет - уже будет ошибка и останов сценария
// то есть мы окошко alert уже и не увидим.
 
  • Like
Реакции: vla

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Я при отладке очень активно использую функцию alert().
Я вывожу значене переменной в обычную строку, созданную для контроля:
<span id="control"></span>
document.getElementById("control").textContent = ID + Значение + Значение_Стиля + ИТД

Создание скрипта подходит к логическому концу!

Для того, чтобы сделать "Скрипт выделения строки" пришлось каждой ячейке TD присвоить ID-имя! Также указать две функции: onMouseOver="f(this);" onMouseOut="ff(this);". Скрипт для каждой ячейки один.

Схема такая:
0. Создаем массив всех нужных ячеек
1. Берем ID, который вызвал функцию
2. Узнаем длину названия ID (количество символов). Соответственно ID ячейкам были даны не от балды!
3. В зависимости от длины решаем что закрасить

Схема примерно такая... Если нужно подробное описание - обращайтесь! Чем смогу - помогу



Щас предоставлю код!


C ПОМОЩЬЮ TABLE :
http://nng10.ru/tras...blica_table.php HTML
http://nng10.ru/trash/js/table.js JS


C ПОМОЩЬЮ DIV (СПОСОБ СЕБЯ НЕ ОПРАВДАЛ!) :
http://nng10.ru/trash/tablica_div.php HTML
http://nng10.ru/trash/js/price.js JS
 

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Создав тему "JavaScript или jQuery?" я понял, что легче решить мою задачу на JQ!

В общем, с задачей я справился с помощью JS. Теперь, хочется упростить код на JS! Извините за мою упертость...

У меня небольшая проблема:

получилось 126 ячеек TD - это не беда - значит мне столько надо...​
проблема в том, что для каждой TD надо писать:​
<td onMouseOver="f_over(this);" onMouseOut="f_out(this);" id="td11">
хоть, функции для всех ячеек одни!

Как можно избежать написания функций для каждой ячейки?
Т.е. избежать этого: <td onMouseOver="f_over(this);" onMouseOut="f_out(this);" id="td11">

Для примера я написал маленькую табличку и простые JS-функции:

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Таблица</title>
<!--CSS-->
<style type="text/css">table td{width:50px;height:50px;border:1px solid #000;}</style>
<!--JavaScript-->
<script type="text/javascript">
function f_over(td){td.style.backgroundColor="#ff6600";}
function f_out(td){td.style.backgroundColor="";}
</script>
</head><body>
<!--HTML-->
<table>
  <tr>
	<td onMouseOver="f_over(this);" onMouseOut="f_out(this);" id="td11">&nbsp;</td>
	<td onMouseOver="f_over(this);" onMouseOut="f_out(this);" id="td12">&nbsp;</td>
  </tr>
  <tr>
	<td onMouseOver="f_over(this);" onMouseOut="f_out(this);" id="td21">&nbsp;</td>
	<td onMouseOver="f_over(this);" onMouseOut="f_out(this);" id="td22">&nbsp;</td>
  </tr>
</table>
</body></html>
Посмотреть эту страницу в браузере можно здесь
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
http://demo.g63.ru/table_hover.html
:biggrin:
 
  • Like
Реакции: vla

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Этого не может быть, блин! :|

Вы видели это?
________________________________________________________________

Я может что-то не понимаю, но это же всё делается на чистом CSS?! Да и дивами такую таблицу верстать - глупо. Уже сейчас ячейки плавают. А еще добавим border 1px .... В общем глюк на глюке, а при воспроизведение в деле - сложно.
Умная подсветка строки таблицы - в этой теме я думал, что это сообщение - шутка...

В отличае от DIV'ов в списке "ячейки" не сместятся! И границу можно аккуратно нарисовать! Я в шоке!

Единственный минус - CSS3!
 

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
inline-table, inline-block - IE7 не осилит... все порушится!
 

Aristotel

Well-Known Member
Регистрация
14.04.2011
Сообщения
213
тогда может такой вариант будет работать
HTML:
 span {text-align: center;display:block; float:left; width: 90px;}
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
в этой теме я думал, что это сообщение - шутка...
От части. Дело в том, что списками верстать таблицу тоже глупо.
Так же глупо, как и сама идея. А раз идея глупая, то и реализацию можно сделать глупой.
Но на списках она точно умнее, чем на JS. ;)

тогда может такой вариант будет работать span {text-align: center;display:block; float:left; width: 90px;}
Еще можно попробовать inline. В общем и для осла6 даже можно сделать.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ