Новости Скрипты Онлайн сервисы Хитрости Гостевая книга Статистика сайта Реклама на сайте
UsefulScript.ruСкриптыРазныеПодсветка строк в таблице
42
155

Подсветка строк в таблице по клику
и при наведении курсора мыши

Представляем Вам очень красивый JavaScript код, который осуществляет подсветку строк таблицы, находящихся в данный момент под курсором мышки. При клике по какой-либо строке таблицы, данная строка будет выделена заданным цветом. При повторном клике по выделенной строке, выделение цветом пропадет.


Обратите внимание на таблицу, расположенную чуть ниже. Попробуйте навести на данную таблицу курсор мыши и покликайте по строкам данной таблицы.


1)Значение 1Значение 2
2)Значение 3Значение 4
3)Значение 5Значение 6
4)Значение 7Значение 8

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


Для того, чтобы получить подобную таблицу с подсвечивающими строками, для начала вставьте на своем сайте между тегами <head> и </head> следующий код:

HTML код:
<style type="text/css">
  
table th {background-colorlightblue;}
  .
hover_Row background-coloryellow; }
  .
clicked_Row background-colorlightgreen; }
</
style>

Далее в тело странички необходимо добавить JavaScript код, который и будет подсвечивать необходимые строки. Для этого просто скопируйте ниже приведенный код на свою страничку.

JavaScript код:
<script type="text/javascript">
function 
highlight_Table_Rows(table_Idhover_Classclick_Classmultiple) {
var 
table document.getElementById(table_Id);
if (
typeof multiple == 'undefined'multiple true;

if (
hover_Class) {
 var 
hover_Class_Reg = new RegExp("\\b"+hover_Class+"\\b");
 
table.onmouseover table.onmouseout = function(e) {
  if (!
ewindow.event;
  var 
elem e.target || e.srcElement;
  while (!
elem.tagName || !elem.tagName.match(/td|th|table/i))
   
elem elem.parentNode;

  if (
elem.parentNode.tagName == 'TR' &&
   
elem.parentNode.parentNode.tagName == 'TBODY') {
   var 
row elem.parentNode;
   if (!
row.getAttribute('clicked_Row'))
   
row.className e.type=="mouseover"?row.className +
   
" " hover_Class:row.className.replace(hover_Class_Reg," ");
  }
 };
}

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

 if (
elem.parentNode.tagName == 'TR' &&
  
elem.parentNode.parentNode.tagName == 'TBODY') {
  var 
click_Class_Reg = new RegExp("\\b"+click_Class+"\\b");
  var 
row elem.parentNode;

  if (
row.getAttribute('clicked_Row')) {
   
row.removeAttribute('clicked_Row');
   
row.className row.className.replace(click_Class_Reg"");
   
row.className += " "+hover_Class;
  }
  else {
   if (
hover_Classrow.className row.className.replace(hover_Class_Reg"");
   
row.className += " "+click_Class;
   
row.setAttribute('clicked_Row'true);

  if (!
multiple) {
   var 
lastRowI table.getAttribute("last_Clicked_Row");
   if (
lastRowI!==null && lastRowI!=='' && row.sectionRowIndex!=lastRowI) {
    var 
lastRow table.tBodies[0].rows[lastRowI];
    
lastRow.className lastRow.className.replace(click_Class_Reg"");
    
lastRow.removeAttribute('clicked_Row');
   }
  }
  
table.setAttribute("last_Clicked_Row"row.sectionRowIndex);
  }
 }
};
}
</script>

Далее в том месте, где должна располагаться Ваша табличка (которую мы будем разукрашивать) создаем таблицу следующим образом:

HTML код:
<div align="center">
<
table id="color_table" border="1" style="border: 1px solid black;
 border-collapse: collapse;"
>
<
tr>
  <
th width="20">1)</th>
  <
td width="120">Значение 1</td><td width="120">Значение 2</td>
</
tr>
<
tr>
  <
th>2)</th><td>Значение 3</td><td>Значение 4</td>
</
tr>
<
tr>
  <
th>3)</th><td>Значение 5</td><td>Значение 6</td>
</
tr>
<
tr>
  <
th>4)</th><td>Значение 7</td><td>Значение 8</td>
</
tr>
</
table>
</
div>

Далее остается только активировать нашу функцию highlight_Table_Rows (описанную ранее), которая и будет делать всю работу по подсветку строк таблицы. Делается это следующим образом:

JavaScript код:
<script type="text/javascript">
 
highlight_Table_Rows("color_table""hover_Row""clicked_Row");
</script>

В результате у Вас на сайте должна появиться точно такая же табличка с подсвечивающимися строками, как и в нашем примере, показанном выше.

Оконные откосы. http://plastika-okon.ru/about.php Деревянные окна на заказ.

Дата создания: 17:33:10 30.10.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений темы: 11012 раз(а).

Комментарии посетителей (всего 11 шт.):
Дмитрий
0
# 72
(16:16:52  09.02.2012 г.)

Хелп плиз... Как сделать тоже самое только для отдельных ячеек?
Немного попробовал менять в скрипте для переопределения на td... Не получается :-(
Ответить

Administrator
0
# 73
(20:19:20  09.02.2012 г.)

Дмитрий, пока тоже не получается.
Попробуйте использовать CSS:
<td onmouseout="bgColor=''" onmouseover="bgColor='yellow'">
Ответить

Владимир
0
# 92
(13:56:31  27.02.2012 г.)

Здравствуйте.
Сделал все то же самое, но при наведении желтый цвет появляется, но после убирания курсора желтым так и остается.
Ответить

Administrator
0
# 93
(19:55:47  27.02.2012 г.)

Владимир, это двойной слеш случайно заэкранировался.
В результате в строке RegExp("\b"+click_Class+"\b"); был выведен только одинарный слеш вместо двойного.
Код подправил, теперь все работает.
Ответить

Михаил
-1
# 125
(17:38:46  30.04.2012 г.)

Автор, если не сложно, то напишите, пожалуйста, в контакт ***.
Проблема в том, что таблица уже создана, она динамическая (т.е. можно добавлять новые строки) и стиль для нее задается в отдельных сиэсесках. Сколько не пытался хоть как-то подстроить ваш код под себя, никак не получается. HELP!
Ответить

Administrator
1
# 126
(18:05:16  30.04.2012 г.)

Михаил, скопируйте наш код за исключением кода самой таблицы. Присвойте своей таблице id="color_table". Если не получится, то лучше обратитесь на наш форум с более подробным описанием проблемы.
Ответить

Den
0
# 139
(07:00:05  11.05.2012 г.)

Кстати, если делать две подряд таблицы по такой схеме как ниже, то подсветка работает только на самой первой таблице, на вторую не реагирует. Почему так и как исправить?
Ответить

Administrator
1
# 141
(19:20:22  11.05.2012 г.)

Den, присвойте второй таблице другой id, например, id="color_table_2".
Также добавьте в последний JavaScript код строчку с id второй таблицы:
highlight_Table_Rows("color_table_2", "hover_Row", "clicked_Row");
Ответить

Denis
0
# 918
(22:59:42  06.06.2013 г.)

Доброго времени суток! Во всех браузерах работает?
Ответить

Administrator
0
# 919
(16:09:21  07.06.2013 г.)

В Опере и IE8 работает, в других не проверял.
Советую Вам обратить внимание на более продвинутый вариант скрипта подсветки строк в таблице на jQuery.
Ответить

Максим
0
# 3299
(18:20:00  30.06.2016 г.)

Всё работает! Вот это понимаю урок! Единственный сайт, где всё чётко, весь день сегодня лазию. В принципе все тоже самое, но работает только это. Ещё раз СПС! Буду юзать на своём сайте!
Ответить

Закрыть
Ваше имя:
891 + 13 =
Добавить комментарий к теме:
Ваше имя:
891 + 13 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Мешает ли Вам реклама на нашем сайте?


Mail.ru LiveInternet