Зачем тут вообще селекторы? У элементов таблицы есть коллекции 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, время: 08:41. |