|
Как сделать подсветку строк таблицы при наведении?
|
|
| [1] likbezz [05.09.2010, 16:31] |
Подсвечивание строк таблицы - Не редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет Javascript). Подсвеченная строка выделяется из серой массы строк таблицы и не позволяет сбиться, к тому же, это ещё и красиво смотрится. |
|
| [2] likbezz [05.09.2010, 16:32] |
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
|
|
| [3] Сергей [08.03.2012, 17:18] |
likbezz,
попробовал использовать Вариант с JS+JQ+CSS. Всё работает во всех браузерах, кроме IE.
Пробую всё пока локально, на своём комрьютере.
Проблема, возможно, в том, что я засунул эту часть
Code $(document).ready(function(){
$(".myHoverTb tr").hover(
function(){$(this).addClass('myhover');},
function(){$(this).removeClass('myhover');
});
});
В результате Интернет Эксплорер пишет "Object Expected", ругается на символ 1 в строке 1, то есть - на знак "$".
Вы не могли бы подсказать, как решить проблему?
Спасибо. |
|
| [4] likbezz [08.03.2012, 18:02] |
Сергей, 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
... |
|
| [5] Сергей [08.03.2012, 18:13] |
Спасибо большое.
Да, проблема была в том, что я на моей веб-странице не сделал ссылку на jquery-файл.
Теперь всё отлично работает (пока локально) во всех браузерах, в том числе в IE-8.
Почему-то в остальных браузерах всё работало даже без ссылки на jquery-файл. |
|
| [6] likbezz [08.03.2012, 18:17] |
Сергей, Quote (Сергей) Теперь всё отлично работает (пока локально) во всех браузерах, в том числе в IE-8.
Было бы удивительно если не работало )) Тем более в ИЕ 8 ... я-то проверял на ИЕ5-6 )))
...
Quote (Сергей) Почему-то в остальных браузерах всё работало даже без ссылки на jquery-файл.
Потому что остальные браузеры понимают :hover для всех элементов - без скрипта, а ИЕ только для ссылок.
... |
|
| [7] Сергей [08.03.2012, 18:42] |
Понял, спасибо.
Подскажите, пожалуйста, лучше использовать jquery 1.6.1 или самую последнюю (в Википедии указана 1.7.1)?
И ещё, лучше использовать min-версию или другую?
Спасибо. Извините за оффтоп. |
|
| [8] likbezz [08.03.2012, 19:05] |
Сергей, Quote (Сергей) Подскажите, пожалуйста, лучше использовать jquery 1.6.1 или самую последнюю (в Википедии указана 1.7.1)?
Лучше использовать системную, так как все системные (юкозовские) функции наверняка работают с родной библиотекой.
А с версией 1,7 - под вопросом, а в JavaScript, видимо, вы не сильны ...
Так что, во избежание проблем работаем с тем, что даёт система.
...
Это не касается тех, кто хорошо понимает JavaScript и осознаёт что делает, подключая не родную библиотеку. Любой версии. |
|
| [9] Сергей [09.03.2012, 15:34] |
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" сразу?
Спасибо. |
|
| [10] likbezz [09.03.2012, 16:23] |
Сергей, 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> |
|