Выделение колонки в таблице
Доброе время суток.
Не могу понять как лучше реализовать идею. имеется таблица <table id="table"> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> и CSS
#table tr:hover{
background:red;
}
Здесь у меня реализовано изменение цвета ряда у таблицы по наведению, здесь все обходится без JS. Я хочу реализовать выделение еще столбца, здесь уже нужен JS, Только не пойму как, можно конечно вешать на каждую ячейку class, но ИМХО это будет прожорливо, т.к. таблицы у меня будут большими. Подскажите советом как будет эффективней |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
td {
width: 20px;
height: 20px;
}
td:first-child + td {
background-color: red;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table id="table" border='1'>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>
|
Цитата:
<style type="text/css">
.attention {background:#999}
</style>
<table id="table">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script type="text/javascript">
var tr_list = document.getElementById('table').getElementsByTagName('tr');
for(var i=0; i<tr_list.length; i++){
tr_list[i].getElementsByTagName('td')[1].className='attention';
}
</script>
|
Цитата:
|
Цитата:
А в принципе, вы уже дали хороший совет насчет CSS селекторов :). Хотя, автору вопроса почему то нужен был JS. |
ksa,
vashurin, не пойму где у вас :hover? |
Ну да, я тоже не пойму, все примеры основаны на статическом окрашивании колонок, а пример с CSS коряво работает с колонками colspan
|
darl,
пример для медитации http://javascript.ru/forum/dom-windo...k-tablicy.html если поискать то ещё найдёте примеры на форуме |
Цитата:
Ну всегда для топикстартера нужно оставить интригу. ;) Что б автор сам понял, что на ячейки таблицы надо повесить слушатель события mouseover. При совершении события проверить "порядковый номер" ячейки относительно всех ячеек родителя, т.е. "номер" TD относительно TR. Во всей таблице, во всех строках, отметить ячейки с "порядковым номером" (последнее я и показал). :) |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 19:21. |