ADMin Портал!

Профиль



Добро пожаловать,
Гость

54.224.76.150

Регистрация или вход
Потеряли пароль?

Сейчас онлайн
Администраторы:0
Пользователей:0
Гостей:32
Поисковые боты:1

Всего:33

Кнопки




Исходный код

Статьи

JavaScript

Примеры javascipt для сайта
Подсветка строк в таблице при наведении
Возможности:
1. Подсветка строки при проведении курсором мыши над строками таблицы
2. Подсветка другим цветом при клике по строке
3. Снятие подсветки повторным кликом по строке
4. Выделение последней кликнутой строки - (подсветка предыдущей строки снимается автоматически)

Функция была найдена где-то в интернете - я ее скорректировал для работы с классами..
function highlightTableRows(tableId, hoverClass, clickClass, defaultClass, multiple)
где
tableId - имя таблицы в HTML
hoverClass - класс строки при наведении
clickClass - класс строки после клика по строке
defaultClass - класс строки по умолчанию
multiple - true/false

Содержимое файла hltable.js:

Код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
function highlightTableRows(tableId, hoverClass, clickClass, defaultClass, multiple)
{
   var table = document.getElementById(tableId);
   
   //если не был передан четвертый аргумент, то по умолчанию принимаем его как true
   if (typeof multiple == 'undefined') multiple = true;
   
   if (hoverClass)
   {
      //регулярное выражение для поиска среди значений атрибута class элемента, имени класса обеспечивающего подсветку по наведению мыши на строку.
      //Данное рег. выражение используется и в обработчике onclick
      var hoverClassReg = new RegExp(""+hoverClass+"");
      
      table.onmouseover = table.onmouseout = function(e)
      {
         if (!e) e = window.event;
         var elem = e.target || e.srcElement;
         while (!elem.tagName || !elem.tagName.match(/td|th|table/i)) elem = elem.parentNode;

         //Если событие связано с элементом TD или TH из раздела TBODY
         if (elem.parentNode.tagName == 'TR' && elem.parentNode.parentNode.tagName == 'TBODY')
         {
            var row = elem.parentNode;//ряд содержащий ячейку таблицы в которой произошло событие
            //Если текущий ряд не "кликнутый" ряд, то в разисимости от события либо применяем стиль, назначая класс, либо устанавливаем класс по умолчанию.
            if (!row.getAttribute('clickedRow')) row.className = e.type=="mouseover"?row.className = hoverClass:row.className = defaultClass;
         }
      };
   }

   
   if (clickClass) table.onclick = function(e)
   {
      if (!e) e = window.event;
      var elem = e.target || e.srcElement;
      while (!elem.tagName || !elem.tagName.match(/td|th|table/i)) elem = elem.parentNode;

      //Если событие связано с элементом TD или TH из раздела TBODY
      if (elem.parentNode.tagName == 'TR' && elem.parentNode.parentNode.tagName == 'TBODY')
      {
         //регулярное выражение для поиска среди значений атрибута class элемента, имени класса обеспечивающего подсветку по клику на строке.
         var clickClassReg = new RegExp(""+clickClass+"");
         var row = elem.parentNode;//ряд содержащий ячейку таблицы в которой произошло событие
         
         //Если текущий ряд уже помечен стилем как "кликнутый"
         if (row.getAttribute('clickedRow'))
         {
            row.removeAttribute('clickedRow');//убираем флаг того что ряд "кликнут"
            row.className = row.className.replace(clickClassReg, "");//убираем стиль для выделения кликом
            row.className += " "+hoverClass;//назначаем класс для выделения строки по наведею мыши, т.к. курсор мыши в данный момент на строке, а выделение по клику уже снято
         }
         else //ряд не подсвечен
         {
            //если задана подсветка по наведению на строку, то убираем её
            if (hoverClass) row.className = row.className.replace(hoverClassReg, "");
            row.className += " "+clickClass;//применяем класс подсветки по клику
            row.setAttribute('clickedRow', true);//устанавливаем флаг того, что ряд кликнут и подсвечен
            
            //если разрешена подсветка только последней кликнутой строки
            if (!multiple)
            {
               var lastRowI = table.getAttribute("lastClickedRowI");
               //Если то текущей строки была кликнута другая строка, то снимаем с неё подсветку и флаг "кликнутости"
               if (lastRowI!==null && lastRowI!=='' && row.sectionRowIndex!=lastRowI)
               {
                  var lastRow = table.tBodies[0].rows[lastRowI];
                  lastRow.className = lastRow.className = defaultClass;//снимаем подсветку с предыдущей кликнутой строки
                  lastRow.removeAttribute('clickedRow');//удаляем флаг "кликнутости" с предыдущей кликнутой строки
               }
            }
            //запоминаем индекс последнего кликнутого ряда
            table.setAttribute("lastClickedRowI", row.sectionRowIndex);
         }
      }
   };
}


Пример:

Код
1
<script type="text/javascript" src="javascript/hltable.js"></script>


Код
1
2
3
4
5
echo "<table id="myTable" cellpadding="3" cellspacing="1" align="center" width="100%">";
echo "<tr class="dcolor"><td>Ячейка 1<td>Ячейка 2";
echo "<tr class="dcolor"><td>Ячейка 3<td>Ячейка 4";
echo "</table>";
echo "<script type="text/javascript">highlightTableRows('myTable','tcolor','ycolor','dcolor',true);</script>";


Пример css:
Код
1
2
3
.tcolor      { background-color: #D8FCCD; }
.ycolor      { background-color: #F9FF88; }
.dcolor      { background-color: #FFFFFF; }

Дата публикации: 30.08.2015
Прочитано: 4625 раз
Нет комментариев. Почему бы Вам не оставить свой?
Ваше имя:
Комментарий:
Секретный код:Секретный код
Повторить:
Антиспам:

Партнеры


требования grid 2: peak performance pack
Информ-сервис : заказать дипломную работу цена консультации: +380(44)221-61-61
На сайте Konsol.kiev.ua : офисная мебель купить в киеве от производителя по тел. (044) 451-40-15

Коменты


Komatoz
хз. но сегодня понадобился
Va-Bank
В общем с современными ОС этот DAEMON Tools уже не требуется..
Va-Bank
Конечно. Ставишь себе Lazarus на Ubuntu и ваяешь программы, ..
Komatoz
Интересно под ubuntu есть такой компилятор?
Va-Bank
Ну здрасьте. Фрипаскаль используется в проекте Lazarus. И я ..
Va-Bank
Выпустил новую версию утилиты. Понадобилась одному моему тов..
ShohinKarimov
Огромное спасибо за статью ;D
kukus
Разобрались. В default-ssl.conf был прописан путь до /var/ww..
kukus
Не работает по https - not found везде, в веб-морде, в win-к..
Komatoz
filename в header необходимо дополнительно обернуть заслешен..
Komatoz
при создании пользователя через phpmyadmin нужно указать (по..
Komatoz
что - то не так пошло с настройкой www сервера - 404ой ошибк..
Дмитрий
После строчки "скопируйте ссылку phpmyadmin из var/www/..
Сергей
Здесь актуальный производственный календарь на текущий год
Komatoz
попробуйте найти разработчика - вполне может быть что за 9 л..


Powered by SLAED CMS © 2005-2007 SLAED. All rights reserved.