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

[master_alf]

Приветсвую.
Долго рылся и в гугле, и здесь на форуме - но ничего не нашел

Подскажите, пожалуйста, как реализовать выделение столбца в таблице(мне нужно изменить свойства css для всех td столбца)?
Из всех вариантов, что пришли в мою голову (а знаком с javascript-ом и Jquery я довольно слабо), позволяет реализовать требуемое лишь замена класса для элементов.
т.е., например, есть у меня td.class1, td.class2, td.class3. А при наведении курсора я меняю всем td.class2 класс на .activeElement.
Но мне кажется, что это какой-то кривой способ.
Наверное же есть что-то более приличное?

[devote]

<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>

[master_alf]

Большое спасибо за решение.

[Триви]

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 тоже бред
Как быть?

[Aetae]

С большими таблицами всё энто оч.долго.
Есть более быстрый вариант: при наведении подкладывать див с минусовым z-index и максимальной высотой под столбец.
Но тут увы куча ограничений есть.

[Триви]

С большими таблицами всё энто оч.долго.
Есть более быстрый вариант: при наведении подкладывать див с минусовым z-index и максимальной высотой под столбец.
Но тут увы куча ограничений есть.

Слишком много, чтобы вообще рассматривать такой вариант.

[devote]

Ну тока такой вариант, самый оптимальный, что бы не вызывать каждый раз поиск элементов, то-есть один раз при загрузке их найти и потом использовать.

<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]

С большими таблицами всё энто оч.долго.

И с большой таблицей очень даже быстро пашет мой второй вариант

[Aetae]

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

[devote]

Зато память кушает наверное огого)

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

Если бы динамичаская смена css в col работала, все бы можно было сделать на 100% логично.=\

Без сомнений