Как выделить столбец в таблице, при наведении курсора на ячейку?
Приветсвую.
Долго рылся и в гугле, и здесь на форуме - но ничего не нашел :( Подскажите, пожалуйста, как реализовать выделение столбца в таблице(мне нужно изменить свойства css для всех td столбца)? Из всех вариантов, что пришли в мою голову (а знаком с javascript-ом и Jquery я довольно слабо), позволяет реализовать требуемое лишь замена класса для элементов. т.е., например, есть у меня td.class1, td.class2, td.class3. А при наведении курсора я меняю всем td.class2 класс на .activeElement. Но мне кажется, что это какой-то кривой способ. Наверное же есть что-то более приличное? |
<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, если объявить переменные глобальными,
код получается гораздо красивее.. а то копипаста кода блин как серпом по одному месту)) Но конешно это неправильно с т.з. конфликта с паралельными скриптами: $("#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 Как быть? |
С большими таблицами всё энто оч.долго.
Есть более быстрый вариант: при наведении подкладывать див с минусовым z-index и максимальной высотой под столбец. Но тут увы куча ограничений есть. |
Цитата:
|
Ну тока такой вариант, самый оптимальный, что бы не вызывать каждый раз поиск элементов, то-есть один раз при загрузке их найти и потом использовать.
<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> |
Цитата:
|
Зато память кушает наверное огого)
Вообще я не навязываюсвой вариант, ино и красить каждую ячейку имхо - плохо. Если бы динамичаская смена css в col работала, все бы можно было сделать на 100% логично.=\ |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 17:58. |