Форум

modestes · #1 (**permalink**) 05.06.2012, 00:03

Подскажите как можно подсветить весь столбец при наведении на ячейки таблицы по вертикали?

walik · #2 (**permalink**) 05.06.2012, 00:13

Подсветка столбцов таблицы

Не ленитесь воспользоватся поиском

frant32 · #3 (**permalink**) 05.06.2012, 00:46

Сообщение от walik

Подсветка столбцов таблицы

Не ленитесь воспользоватся поиском

<!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">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

modestes · #4 (**permalink**) 05.06.2012, 00:49

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

допустим взять первый вариант
кусок скрипта, что с ним делать я не представляю
$('#tableone').columnHover();
плагин скачал, прицепил.
вставил кусок выше в тело страницы в тег <script>
а с классами не понял

modestes · #5 (**permalink**) 05.06.2012, 00:51

frant32
Спасибо, но это не то, мне нужно подсветить колонки а не строки.)

Deff · #6 (**permalink**) 05.06.2012, 00:54

modestes,
Простейшее - проставьте каждой колонке(в td) индивидуальный класс
При наведении на любую ячейку колонки - добавляйте к элементам данной колонки доп.класс HOVER, этому классу в css даёте подсветку

devote · #7 (**permalink**) 05.06.2012, 02:06

помойму на этот вопрос отвечали уж все кому не лень, вот тут я писал решение когда-то:
Как выделить столбец в таблице, при наведении курсора на ячейку?

modestes · #8 (**permalink**) 05.06.2012, 12:21

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")
эта запись не работает
или я не правильно записываю?

Deff · #9 (**permalink**) 05.06.2012, 12:31

.css({
       "background-color":#F1F1E9",
       "color":"#0000FF",
       "border":"1px solid red"
     });

modestes · #10 (**permalink**) 05.06.2012, 13:07

.css это присваиваемый класс получается, я думал это что-то из js, выходит не обязательно прописывать в самом скрипте стиль, можно сразу в файле css?
Только что-то ваш вариант не работает

Форум

Справочник

Discord чат

Курсы javascript