Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсветка строк и столбцов таблицы html (https://javascript.ru/forum/dom-window/52462-podsvetka-strok-i-stolbcov-tablicy-html.html)

sashgera 20.12.2014 14:46

Подсветка строк и столбцов таблицы 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>

MallSerg 20.12.2014 14:57

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

Статья по теме
от тебя требуется переопределить все события у всех элементов
или же изменить поведение фукции из 48 строки

рони 20.12.2014 16:03

sashgera,
добавить строка 53
var cls = target.parentNode.className;
            if(cls == 'nolighting') return;

sashgera 20.12.2014 18:44

рони, спасибо, после внесения изменений в JS, при наведении на строку с классом .nolighting подсветки не стало, но теперь пропала подсветка столбцов при наведении на другие ячейки
вот пример с внесением вашего кода: http://www.glass-pgc.ru/Untitled_table_hover3.html

рони 20.12.2014 19:06

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;

sashgera 20.12.2014 20:04

рони, да, все ОК, просто я был не внимателен: http://www.glass-pgc.ru/Untitled_table_hover3.html
В теме я не совсем правильно задал вопрос - как запретить подсветку при наведении на строку с классом .nolighting. На самом деле нужно вообще запретить подсветку строки с этим классом. Например, если навести выше/ниже этой строки, то должна подсвечивается вся колонка кроме ячейки, которая находится в строке с классом .nolighting
Поможете?

MallSerg 20.12.2014 20:14

Тогда тебе нужно изменить функцию в 10й строке
первый параметр этой функции это объект ячейки

рони 20.12.2014 20:19

sashgera,
добавить ещё в строку 10
if(o.parentNode.className == 'nolighting' || o.className == 'nolighting') return;

sashgera 20.12.2014 20:47

рони, большое спасибо!


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