Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выделение колонки в таблице (https://javascript.ru/forum/misc/41557-vydelenie-kolonki-v-tablice.html)

darl 19.09.2013 08:25

Выделение колонки в таблице
 
Доброе время суток.
Не могу понять как лучше реализовать идею.
имеется таблица
<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, но ИМХО это будет прожорливо, т.к. таблицы у меня будут большими.
Подскажите советом как будет эффективней

ksa 19.09.2013 08:51

Цитата:

Сообщение от darl
Я хочу реализовать выделение еще столбца, здесь уже нужен JS

Не факт! :D

<!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>

vashurin 19.09.2013 08:59

Цитата:

Сообщение от darl (Сообщение 272808)
Доброе время суток.
Не могу понять как лучше реализовать идею.
имеется таблица
<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, но ИМХО это будет прожорливо, т.к. таблицы у меня будут большими.
Подскажите советом как будет эффективней

<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>

ksa 19.09.2013 09:02

Цитата:

Сообщение от vashurin
getElementsByTagName('tr')
getElementsByTagName('td')

Есть же коллекции rows() и cells()...

vashurin 19.09.2013 09:05

Цитата:

Сообщение от ksa (Сообщение 272815)
Есть же коллекции rows() и cells()...

Кстати, да! Но просто первое, что на ум пришло. :)
А в принципе, вы уже дали хороший совет насчет CSS селекторов :).
Хотя, автору вопроса почему то нужен был JS.

рони 19.09.2013 10:23

ksa,
vashurin,
не пойму где у вас :hover?

darl 19.09.2013 12:04

Ну да, я тоже не пойму, все примеры основаны на статическом окрашивании колонок, а пример с CSS коряво работает с колонками colspan

рони 19.09.2013 12:16

darl,
пример для медитации http://javascript.ru/forum/dom-windo...k-tablicy.html
если поискать то ещё найдёте примеры на форуме

vashurin 19.09.2013 13:12

Цитата:

Сообщение от рони (Сообщение 272833)
ksa,
vashurin,
не пойму где у вас :hover?

:)
Ну всегда для топикстартера нужно оставить интригу. ;)
Что б автор сам понял, что на ячейки таблицы надо повесить слушатель события mouseover.
При совершении события проверить "порядковый номер" ячейки относительно всех ячеек родителя, т.е. "номер" TD относительно TR.
Во всей таблице, во всех строках, отметить ячейки с "порядковым номером" (последнее я и показал). :)

ksa 19.09.2013 14:54

Цитата:

Сообщение от рони
не пойму где у вас :hover?

Цитата:

Сообщение от vashurin
всегда для топикстартера нужно оставить интригу

Именно так. :yes:


Часовой пояс GMT +3, время: 06:17.