Подсветка ячект таблицы
Подскажите как можно подсветить весь столбец при наведении на ячейки таблицы по вертикали?
|
|
Цитата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main{width:200px; height:200px; background:#CCCCCC}
td.podsvet, #main tr:hover{background:red;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script src="file:///D|/Documents and Settings/Admin/Рабочий стол/jquery.columnhover.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#main').columnHover({eachCell:false, hoverClass:'podsvet', includeSpans:true});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
</head>
<body>
<table width="200" border="1" id='main'>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
|
пользовался, но к сожалению с js не дружу.
нарыл вот этот сайт с примерами но там не описано что куда вставлять не могли бы вы подсказать? допустим взять первый вариант кусок скрипта, что с ним делать я не представляю $('#tableone').columnHover(); плагин скачал, прицепил. вставил кусок выше в тело страницы в тег <script> а с классами не понял |
frant32
Спасибо, но это не то, мне нужно подсветить колонки а не строки.) |
modestes,
Простейшее - проставьте каждой колонке(в td) индивидуальный класс При наведении на любую ячейку колонки - добавляйте к элементам данной колонки доп.класс HOVER, этому классу в css даёте подсветку |
помойму на этот вопрос отвечали уж все кому не лень, вот тут я писал решение когда-то:
Как выделить столбец в таблице, при наведении курсора на ячейку? |
devote
Спасибо, то что нужно. Интересует еще вот что
<script type="text/javascript">
$("#host-table th,#vds-table th").mouseover(function() {
var tds = $( this ).parent().find("th"),
index = $.inArray( this, tds );
$("#host-table th:nth-child,#vds-table th:nth-child("+( index + 2 )+")").css("background-color", "#F1F1E9");
}).mouseout(function() {
var tds = $( this ).parent().find("th"),
index = $.inArray( this, tds );
$("#host-table th:nth-child,#vds-table th:nth-child("+( index + 2 )+")").css("background-color", "");
});
</script>
как мне добавить к примеру тень или рамку к выделяемому столбцу? например рамку .css("background-color", "#F1F1E9", "border", "1px") эта запись не работает или я не правильно записываю? |
.css({
"background-color":#F1F1E9",
"color":"#0000FF",
"border":"1px solid red"
});
|
.css это присваиваемый класс получается, я думал это что-то из js, выходит не обязательно прописывать в самом скрипте стиль, можно сразу в файле css?
Только что-то ваш вариант не работает |
| Часовой пояс GMT +3, время: 23:19. |