Фильтр по:
  

Как сделать подсветку строк таблицы при наведении?

Как сделать...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать подсветку строк таблицы при наведении? (CSS, JavaScript.)
Как сделать подсветку строк таблицы при наведении?
Дата: Воскресенье, 05.09.2010, 16:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
© Автор: krash, Оригинал поста,

Подсвечивание строк таблицы - Не редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет Javascript). Подсвеченная строка выделяется из серой массы строк таблицы и не позволяет сбиться, к тому же, это ещё и красиво смотрится.

 
Дата: Воскресенье, 05.09.2010, 16:32 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 krash,
Quote (krash)
Подскажите пожалуйста как)

Quote (krash)
Вот ещё вопрос - а возможно ли сделать подсветку таблицы в uCoz? И как это сделать?

Quote (YuriT)
Но есть ньюанс: в IE (по крайней мере до IE6) этот псевдокласс работал только в применении к ссылке, т.е. к элементу A.

... Несомненно, через CSS - наиболее «грамотный» способ, но в ранних версиях ИЕ, и некоторых других браузерах - не работает, по этому, можно сделать «комбинированно» (вот такое слово - по другому - не придумал ... эх, и где «моя родная русский язык» ...)
Варинтов, как минимум, несколько.

Вот первый:

Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr>
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr>
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>

В CSS:

Quote (CSS)
<style type="text/css">
.myHoverTb tr:hover td{background-color:#CCC;} /* Для нормальных браузеров */
.myhover td{background-color:#CCC;} /* Для ИЕ и прочих */
</style>

JavaScript:

Quote (JavaScript)
<script type="text/javascript" defer="defer">
$(document).ready(function(){
$(".myHoverTb tr").hover(
function(){$(this).addClass('myhover');},
function(){$(this).removeClass('myhover');
});
});
</script>

----- // ----

Вариант два:
CSS - тот же. HTML:

Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>

----- // -----

Вариант нумер три:
CSS - можно не трогать, меняем только HTML:

Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr onmouseover="this.style.backgroundColor='#CCC'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#F0F'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#FF0'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>

Поддерживаемые браузеры
Internet Explorer 5.5, 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.2, 9.5
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0

Примеры:
☑ Вариант с JS+JQ+CSS
☑ Вариант с JS+CSS
☑ Вариант с JS

Flesh

Прикрепления: myHover_v1-1-.html (1.8 Kb) · myHover_v2-1-.html (2.1 Kb) · myHover_v3-1-.html (2.2 Kb)

 
Дата: Четверг, 08.03.2012, 17:18 |
Сергей
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 likbezz,
попробовал использовать Вариант с JS+JQ+CSS. Всё работает во всех браузерах, кроме IE.
Пробую всё пока локально, на своём комрьютере.

Проблема, возможно, в том, что я засунул эту часть

Code
$(document).ready(function(){  
  $(".myHoverTb tr").hover(  
  function(){$(this).addClass('myhover');},  
  function(){$(this).removeClass('myhover');  
  });  
  });
во внешний js-файл.

В результате Интернет Эксплорер пишет "Object Expected", ругается на символ 1 в строке 1, то есть - на знак "$".

Вы не могли бы подсказать, как решить проблему?
Спасибо.

 
Дата: Четверг, 08.03.2012, 18:02 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Сергей,
Quote (Сергей)
Пробую всё пока локально, на своём комрьютере.

Может из-за того и не работает?
Версия ИЕ у вас какая?
Quote (Сергей)
во внешний js-файл.

У, нет ... тестить лучше в исходнике, ибо не все понимают пути типа С:\ ...
...
Quote (Сергей)
ругается на символ 1 в строке 1, то есть - на знак "$".

Не подключена библиотека JQ:
Вот это в документ добавьте:
Code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

...
Quote (Сергей)
Вы не могли бы подсказать, как решить проблему?

Тестить на сайте, и никаких проблем не будет, ибо код полностью рабочий и проверен во всех обозревателях.
...

И, кстати, есть же примеры .... Они работают у вас? - значит проблема локального характера ...
Quote (likbezz)
Примеры:
☑ Вариант с JS+JQ+CSS
☑ Вариант с JS+CSS
☑ Вариант с JS

...

 
Дата: Четверг, 08.03.2012, 18:13 |
Сергей
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 Спасибо большое.
Да, проблема была в том, что я на моей веб-странице не сделал ссылку на jquery-файл.

Теперь всё отлично работает (пока локально) во всех браузерах, в том числе в IE-8.

Почему-то в остальных браузерах всё работало даже без ссылки на jquery-файл.

 
Дата: Четверг, 08.03.2012, 18:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Сергей,
Quote (Сергей)
Теперь всё отлично работает (пока локально) во всех браузерах, в том числе в IE-8.

Было бы удивительно если не работало )) Тем более в ИЕ 8 ... я-то проверял на ИЕ5-6 )))
...
Quote (Сергей)
Почему-то в остальных браузерах всё работало даже без ссылки на jquery-файл.

Потому что остальные браузеры понимают :hover для всех элементов - без скрипта, а ИЕ только для ссылок.
...

 
Дата: Четверг, 08.03.2012, 18:42 |
Сергей
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 Понял, спасибо.

Подскажите, пожалуйста, лучше использовать jquery 1.6.1 или самую последнюю (в Википедии указана 1.7.1)?
И ещё, лучше использовать min-версию или другую?

Спасибо. Извините за оффтоп.

 
Дата: Четверг, 08.03.2012, 19:05 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Сергей,
Quote (Сергей)
Подскажите, пожалуйста, лучше использовать jquery 1.6.1 или самую последнюю (в Википедии указана 1.7.1)?

Лучше использовать системную, так как все системные (юкозовские) функции наверняка работают с родной библиотекой.
А с версией 1,7 - под вопросом, а в JavaScript, видимо, вы не сильны ...
Так что, во избежание проблем работаем с тем, что даёт система.
...

Это не касается тех, кто хорошо понимает JavaScript и осознаёт что делает, подключая не родную библиотеку. Любой версии.

 
Дата: Пятница, 09.03.2012, 15:34 |
Сергей
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 likbezz, спасибо большое за ответы.

Я заметил такую проблему в таблице.

Code
    <tr>
   <td rowspan="2">Современные средства</td>
   <td width="75">III</td>
   <td width="75">8</td>
  </tr>
  <tr>
   <td width="75">VI</td>
   <td width="75">11</td>
  </tr>

Когда я навожу курсор на ячейку "Современные средства", вместе с ней выделяется только строка с ячейками "III" и "8", то есть, только верхняя из двух строк.
Можно ли как-нибудь решить эту проблему, чтобы при наведении на "Современные средства" выделялись и "III" и "8", и "VI" и "11" сразу?
Спасибо.

 
Дата: Пятница, 09.03.2012, 16:23 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Сергей,
Quote (Сергей)
Можно ли как-нибудь решить эту проблему, чтобы при наведении на "Современные средства" выделялись и "III" и "8", и "VI" и "11" сразу?

Code
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Современные средства</td>
<td width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75">III</td>
<td width="75">8</td>
</tr>
<tr>
<td width="75">VI</td>
<td width="75">11</td>
</tr>
</table>
</td>
</tr>
</table>

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать подсветку строк таблицы при наведении? (CSS, JavaScript.)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия