Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.12.2014, 14:46
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Подсветка строк и столбцов таблицы html
Здравствуйте
Есть javascript выполнение которого заключается в следующем:
при наведении на ячейку таблицы html - подсвечивается вся строка и столбец, где расположена эта ячейка
Пожалуйста, помогите сделать, чтобы при наведении на строку, например с классом .nolighting, не было подсветки с таким эффектом
<tr class="nolighting"> <!-- запретить подсветку строк и столбцов -->
    <td></td><td></td><td></td>
</tr>

вот пример: http://www.glass-pgc.ru/Untitled_table_hover.html
<script type="text/javascript">
function addLoadEvent(func) {
	var old = window.onload
	if (typeof old != 'function') window.onload = func
	else window.onload = function() { old(); func(); }
}
function hc(cN, c) {
	return (!c || !cN) ? false : ((" " + cN + " ").indexOf(" " + c + " ") !== -1)
}
function cc(o, add, del) { 
	var n = "className", cN = (undefined != o[n]) ? o[n] : o, ok = 0
	if ("string" !== typeof cN) return false
	var re = new RegExp('(\\s+|^)' + del + '(\\s+|$)', 'g')
	if (add) 
		if (!hc(cN, add)) {cN += " " + add; ok++}
	if (del) 
		if (hc(cN, del)) {cN = cN.replace(re, " "); ok++}
	if (!ok) return false
	if ("object" == typeof o) o[n] = cN 
	else return cN
}
-function (){
	var rowHover = 'rowhover', colColor = '#D1F8EF', cellHover = 'cellhover', tWidth = 15, 
		prefixT = 't', prefixC = 'td';
	prepTableHL = function (e, t, tW, rH, colC, cH){
		t = t || document.getElementById('sf');
		if (rH) rowHover = rH
		if (colC) colColor = colC
		if (cH) cellHover = cH
		if (tW) tWidth = tW
		else tWidth = t.rows[0].cells.length;
		t.onmouseout = cBg;
		t.onmouseover = cBg
		var list = t.getElementsByTagName('td');
		for (var i = 0, l = list.length; i < l; i ++) {
			cc(list[i], prefixC + list[i].cellIndex)
		}
	}
	var i = tWidth + 1, sele = '', comma = '';
	while (-- i) {
		sele += comma + '.' + prefixT + (i - 1) + ' .' + prefixC + (i - 1)
		comma = ', '
	}
	document.write('<style type="text/css">\
		' + sele + ' {background-color:' + colColor + ';}\
</style>'
	);
	var cBg = function (e, t) {
		e = e || window.event;
		t = t || this
		var target = e.target || e.srcElement, cI = target.cellIndex;
		if (typeof cI !== 'undefined') {
			var cls = prefixT + cI;
			if (e.type == 'mouseover') {
				cc(t, cls);
				cc(target.parentNode, rowHover)
				cc(target, cellHover)
			}
			else {
				cc(t, null, cls);
				cc(target.parentNode, null, rowHover)
				cc(target, null, cellHover)
			}
		}
	};
	addLoadEvent(prepTableHL)
}()
</script>

<style type="text/css">
#sf .cellhover {background-color:#FFFFFF;} 
.rowhover {background-color:#D1F8EF;} 
</style>
<table id="sf" width="300" border="1">
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr class="nolighting"><!-- запретить подсветку строк и столбцов -->
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 20.12.2014, 14:57
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,134

http://learn.javascript.ru/bubbling-and-capturing

Статья по теме
от тебя требуется переопределить все события у всех элементов
или же изменить поведение фукции из 48 строки
Ответить с цитированием
  #3 (permalink)  
Старый 20.12.2014, 16:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sashgera,
добавить строка 53
var cls = target.parentNode.className;
            if(cls == 'nolighting') return;
Ответить с цитированием
  #4 (permalink)  
Старый 20.12.2014, 18:44
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, спасибо, после внесения изменений в JS, при наведении на строку с классом .nolighting подсветки не стало, но теперь пропала подсветка столбцов при наведении на другие ячейки
вот пример с внесением вашего кода: http://www.glass-pgc.ru/Untitled_table_hover3.html
Ответить с цитированием
  #5 (permalink)  
Старый 20.12.2014, 19:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sashgera, почувствуйте разницу
var cls = target.parentNode.className;
            if(cls == 'nolighting') return;
	cls = prefixT + cI;

и у вас
var cls = prefixT + cI;
			var cls = target.parentNode.className;
            if(cls == 'nolighting') return;
Ответить с цитированием
  #6 (permalink)  
Старый 20.12.2014, 20:04
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, да, все ОК, просто я был не внимателен: http://www.glass-pgc.ru/Untitled_table_hover3.html
В теме я не совсем правильно задал вопрос - как запретить подсветку при наведении на строку с классом .nolighting. На самом деле нужно вообще запретить подсветку строки с этим классом. Например, если навести выше/ниже этой строки, то должна подсвечивается вся колонка кроме ячейки, которая находится в строке с классом .nolighting
Поможете?
Ответить с цитированием
  #7 (permalink)  
Старый 20.12.2014, 20:14
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,134

Тогда тебе нужно изменить функцию в 10й строке
первый параметр этой функции это объект ячейки
Ответить с цитированием
  #8 (permalink)  
Старый 20.12.2014, 20:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sashgera,
добавить ещё в строку 10
if(o.parentNode.className == 'nolighting' || o.className == 'nolighting') return;
Ответить с цитированием
  #9 (permalink)  
Старый 20.12.2014, 20:47
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фильтр таблицы HTML sashgera Элементы интерфейса 13 04.02.2018 17:43
Добавление строк в таблицу и скрытие таблицы. III Общие вопросы Javascript 39 20.11.2015 10:05
Подсветка столбцов таблицы ctocopok Элементы интерфейса 31 14.06.2011 01:42
Конвертация txt таблицы в html gaiver Общие вопросы Javascript 95 09.03.2009 22:19
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 01:28