Как выделить столбец в таблице, при наведении курсора на ячейку?
Приветсвую.
Долго рылся и в гугле, и здесь на форуме - но ничего не нашел :( Подскажите, пожалуйста, как реализовать выделение столбца в таблице(мне нужно изменить свойства 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% логично.=\ |
Цитата:
Цитата:
|
Зачем тут вообще селекторы? У элементов таблицы есть коллекции rows, cells и свойства rowIndex, cellIndex. А еще есть тег <col>, специально для оформления столбцов.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #000;
}
.highlight {
background: #fcc;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$("table").each(function () {
var $highlighted, $cols = $("col", this);
function highlight(index) {
unhighlight();
$highlighted = $cols.eq(index).addClass("highlight");
}
function unhighlight() {
if ($highlighted) {
$highlighted.removeClass("highlight");
}
}
$(this).bind({
mousemove: function (event) {
var target = event.target;
if ("cellIndex" in target) {
highlight(target.cellIndex);
}
},
mouseout: unhighlight
});
});
</script>
</body>
</html>
Только в процессе написания выяснилось, что Opera 11.51 не поддерживает динамическое добавление CSS-класса для <col> :-/--------- а не прочитал про col выше |
| Часовой пояс GMT +3, время: 01:19. |