VPF::Подсветка строк и столбцов таблицы html

sashgera

Дата 19.12.2014, 16:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Здравствуйте
Есть javascript при выполнении которого подсвечиваются строки и столбцы таблицы html - вот пример: http://www.glass-pgc.ru/Untitled_table_hover.html
Пожалуйста, помогите сделать, чтобы js не применялся к строке с классом .nolighting - при наведении на строку tr с таким классом не было подсветки строк и столбцов

Код


function addLoadEvent(func) {
    var old = window.onload
    if (typeof old != 'function') window.onload = func
    else window.onload = function() { old(); func(); }
}

function hc(cN /*string only*/, c) { /*hasClass*/
    return (!c || !cN) ? false : ((" " + cN + " ").indexOf(" " + c + " ") !== -1)
}

function cc(o, add, del) { /*cnangeClass*/
    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) /*addClass*/
        if (!hc(cN, add)) {cN += " " + add; ok++}
    if (del) /*delClass*/
        if (hc(cN, del)) {cN = cN.replace(re, " "); ok++}
    if (!ok) return false
    if ("object" == typeof o) o[n] = cN 
    else return cN
}
//common lib end

-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)
}()

Код


#sf .cellhover {background-color:#FFFFFF;} 
.rowhover {background-color:#D1F8EF;} 
.nolighting {background-color:#f00000;}

Код


<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>.nolighting</td>
    <td>.nolighting</td>
    <td>.nolighting</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>
</table>

Это сообщение отредактировал(а) Aliance - 19.12.2014, 16:51

Aliance

Дата 19.12.2014, 16:56 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Зачем здесь вообще JS? Используйте css :hover

Добавлено через 3 минуты и 43 секунды
http://jsfiddle.net/Aliance/bcyrLLqk/

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

sashgera

Дата 19.12.2014, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Aliance, в css hover не применяется к столбцам, смотрите пример: http://www.glass-pgc.ru/Untitled_table_hover.html

Это сообщение отредактировал(а) sashgera - 19.12.2014, 17:06

Aliance

Дата 19.12.2014, 17:28 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

sashgera, тогда да, соглашусь.

В таком случае вставьте следующий код:

Код


if (o.parentNode.nodeName.toLowerCase() == 'tr' && o.parentNode.className.indexOf('nolighting') !== -1) {
   return;
}

внутрь функции cc между строчками

Цитата

var re = new RegExp('(\\s+|^)' + del + '(\\s+|$)', 'g')

Цитата

if (add) /*addClass*/

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

sashgera

Дата 19.12.2014, 17:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Aliance, спасибо, но ваш код выполняет только часть задачи
что делает js:
1) при наведении на ячейку - эта ячейка получает background-color (белый цвет)
2) соседние ячейки этой строки - получают background-color (синий цвет)
3) столбец, в которой находится эта ячейка - получает background-color (синий цвет)
а вот при наведении на строку с классом .nolighting, js не должен выполняться

ваш код выполнил только первый пункт, вот пример с внесением вашего кода: http://www.glass-pgc.ru/Untitled_table_hover2.html

if (o.parentNode.nodeName.toLowerCase() == 'tr' && o.parentNode.className.indexOf('nolighting') !== -1) {
return;
}

Это сообщение отредактировал(а) sashgera - 19.12.2014, 18:25

sashgera

Дата 21.12.2014, 00:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

вопрос решен

Aliance

Дата 22.12.2014, 08:58 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Цитата(sashgera @ 21.12.2014, 01:50

)

вопрос решен

Обычно принято на форуме писать найденное решение, оно может пригодиться кому-то еще.

Кроме того, когда вы получили ответ на ваш вопрос в правом верхнем углу темы есть ссылка "пометить как решенный", хорошо бы ее не забывать нажимать.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »