Подсветка строк и столбцов таблицы 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> |
http://learn.javascript.ru/bubbling-and-capturing
Статья по теме от тебя требуется переопределить все события у всех элементов или же изменить поведение фукции из 48 строки |
sashgera,
добавить строка 53 var cls = target.parentNode.className; if(cls == 'nolighting') return; |
рони, спасибо, после внесения изменений в JS, при наведении на строку с классом .nolighting подсветки не стало, но теперь пропала подсветка столбцов при наведении на другие ячейки
вот пример с внесением вашего кода: http://www.glass-pgc.ru/Untitled_table_hover3.html |
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; |
рони, да, все ОК, просто я был не внимателен: http://www.glass-pgc.ru/Untitled_table_hover3.html
В теме я не совсем правильно задал вопрос - как запретить подсветку при наведении на строку с классом .nolighting. На самом деле нужно вообще запретить подсветку строки с этим классом. Например, если навести выше/ниже этой строки, то должна подсвечивается вся колонка кроме ячейки, которая находится в строке с классом .nolighting Поможете? |
Тогда тебе нужно изменить функцию в 10й строке
первый параметр этой функции это объект ячейки |
sashgera,
добавить ещё в строку 10 if(o.parentNode.className == 'nolighting' || o.className == 'nolighting') return; |
рони, большое спасибо!
|
Часовой пояс GMT +3, время: 18:22. |