Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.09.2011, 15:47
Аспирант
Отправить личное сообщение для master_alf Посмотреть профиль Найти все сообщения от master_alf
 
Регистрация: 08.04.2010
Сообщений: 34

Как выделить столбец в таблице, при наведении курсора на ячейку?
Приветсвую.
Долго рылся и в гугле, и здесь на форуме - но ничего не нашел

Подскажите, пожалуйста, как реализовать выделение столбца в таблице(мне нужно изменить свойства css для всех td столбца)?
Из всех вариантов, что пришли в мою голову (а знаком с javascript-ом и Jquery я довольно слабо), позволяет реализовать требуемое лишь замена класса для элементов.
т.е., например, есть у меня td.class1, td.class2, td.class3. А при наведении курсора я меняю всем td.class2 класс на .activeElement.
Но мне кажется, что это какой-то кривой способ.
Наверное же есть что-то более приличное?
Ответить с цитированием
  #2 (permalink)  
Старый 06.09.2011, 16:22
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<table id="mytable" border="1">
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
<tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
</tr>
<tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
</tr>
</table>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $("#mytable td").mouseover(function() {
        var tds = $( this ).parent().find("td"),
            index = $.inArray( this, tds );

        $("#mytable td:nth-child("+( index + 1 )+")").css("background-color", "#f00");
    }).mouseout(function() {
        var tds = $( this ).parent().find("td"),
            index = $.inArray( this, tds );

        $("#mytable td:nth-child("+( index + 1 )+")").css("background-color", "#fff");
    });
</script>

Последний раз редактировалось devote, 06.09.2011 в 16:24.
Ответить с цитированием
  #3 (permalink)  
Старый 07.09.2011, 10:51
Аспирант
Отправить личное сообщение для master_alf Посмотреть профиль Найти все сообщения от master_alf
 
Регистрация: 08.04.2010
Сообщений: 34

Большое спасибо за решение.
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2011, 23:11
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

devote, если объявить переменные глобальными,
код получается гораздо красивее..
а то копипаста кода блин как серпом по одному месту))
Но конешно это неправильно с т.з. конфликта с паралельными скриптами:

$("#mytable td").mouseover(function() {
    tds = $( this ).parent().find("td"),
    index = $.inArray( this, tds ),
    sel_tds = $("#mytable td:nth-child("+( index + 1 )+")");

    sel_tds.css("background-color", "#f00");
}).mouseout(function() {
    sel_tds.css("background-color", "#fff");
});


Но как всё таки избавиться от копипасты, используя локальные переменные???
Писать функции и назначать обработчик в каждом TD тоже бред
Как быть?
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2011, 23:24
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

С большими таблицами всё энто оч.долго.
Есть более быстрый вариант: при наведении подкладывать див с минусовым z-index и максимальной высотой под столбец.
Но тут увы куча ограничений есть.
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2011, 23:29
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

Сообщение от Aetae Посмотреть сообщение
С большими таблицами всё энто оч.долго.
Есть более быстрый вариант: при наведении подкладывать див с минусовым z-index и максимальной высотой под столбец.
Но тут увы куча ограничений есть.
Слишком много, чтобы вообще рассматривать такой вариант.
Ответить с цитированием
  #7 (permalink)  
Старый 09.09.2011, 00:19
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Ну тока такой вариант, самый оптимальный, что бы не вызывать каждый раз поиск элементов, то-есть один раз при загрузке их найти и потом использовать.
<table id="mytable" border="1"> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>6</td> 
    <td>7</td> 
    <td>8</td> 
    <td>9</td> 
    <td>10</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
<tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
    <td>14</td> 
    <td>15</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
</tr> 
</table> 
  
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
    (function(){
        var tds = [];
        $("#mytable tr").each(function( i ) {
            $(this).children().each(function( index ){
                if ( i == 0 ) tds.push( $("#mytable td:nth-child("+( index + 1 )+")") );
                this.customAttrIndex = index;
            });
        });

        $("#mytable td").mouseover(function() { 
            tds[ this.customAttrIndex ].css("background-color", "#f00"); 
        }).mouseout(function() { 
            tds[ this.customAttrIndex ].css("background-color", "#fff"); 
        });
    })();
</script>

Последний раз редактировалось devote, 09.09.2011 в 00:31.
Ответить с цитированием
  #8 (permalink)  
Старый 09.09.2011, 00:29
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Aetae
С большими таблицами всё энто оч.долго.
И с большой таблицей очень даже быстро пашет мой второй вариант
Ответить с цитированием
  #9 (permalink)  
Старый 09.09.2011, 01:23
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Зато память кушает наверное огого)
Вообще я не навязываюсвой вариант, ино и красить каждую ячейку имхо - плохо.
Если бы динамичаская смена css в col работала, все бы можно было сделать на 100% логично.=\
__________________
29375, 35

Последний раз редактировалось Aetae, 09.09.2011 в 01:27.
Ответить с цитированием
  #10 (permalink)  
Старый 09.09.2011, 01:31
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Aetae
Зато память кушает наверное огого)
В этом я сомневаюсь, ведь по сути там используются лишь ссылки на объект, количество объектов лишь столько, сколько столбцов, не больше. Так что памяти ест мизер.

Сообщение от Aetae
Если бы динамичаская смена css в col работала, все бы можно было сделать на 100% логично.=\
Без сомнений
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка выделялась при наведении курсора Krest_xxx Общие вопросы Javascript 2 28.08.2011 20:36
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55