Показать сообщение отдельно
  #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>
Ответить с цитированием