Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как выделить столбец в таблице, при наведении курсора на ячейку? (https://javascript.ru/forum/jquery/21361-kak-vydelit-stolbec-v-tablice-pri-navedenii-kursora-na-yachejjku.html)

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

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

devote 06.09.2011 16:22 
<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 07.09.2011 10:51
Большое спасибо за решение.

Триви 08.09.2011 23:11
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 тоже бред :-E
Как быть?

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

Триви 08.09.2011 23:29
Цитата:
Сообщение от Aetae (Сообщение 125654)
С большими таблицами всё энто оч.долго.
Есть более быстрый вариант: при наведении подкладывать див с минусовым z-index и максимальной высотой под столбец.
Но тут увы куча ограничений есть.
Слишком много, чтобы вообще рассматривать такой вариант.

devote 09.09.2011 00:19
Ну тока такой вариант, самый оптимальный, что бы не вызывать каждый раз поиск элементов, то-есть один раз при загрузке их найти и потом использовать.
<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:29
Цитата:
Сообщение от Aetae
С большими таблицами всё энто оч.долго.
И с большой таблицей очень даже быстро пашет мой второй вариант

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

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

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


Часовой пояс GMT +3, время: 02:18.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице