Форум

darl · #1 (**permalink**) 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 · #2 (**permalink**) 19.09.2013, 08:51

Сообщение от darl

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

Не факт!

<!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 · #3 (**permalink**) 19.09.2013, 08:59

Сообщение от darl

Доброе время суток.
Не могу понять как лучше реализовать идею.
имеется таблица

<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 · #4 (**permalink**) 19.09.2013, 09:02

Сообщение от vashurin

getElementsByTagName('tr')
getElementsByTagName('td')

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

vashurin · #5 (**permalink**) 19.09.2013, 09:05

Сообщение от ksa

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

Кстати, да! Но просто первое, что на ум пришло.

А в принципе, вы уже дали хороший совет насчет CSS селекторов

.
Хотя, автору вопроса почему то нужен был JS.

рони · #6 (**permalink**) 19.09.2013, 10:23

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

darl · #7 (**permalink**) 19.09.2013, 12:04

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

рони · #8 (**permalink**) 19.09.2013, 12:16

darl,
пример для медитации Подсветка родительских ячеек таблицы
если поискать то ещё найдёте примеры на форуме

vashurin · #9 (**permalink**) 19.09.2013, 13:12

Сообщение от рони

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

Ну всегда для топикстартера нужно оставить интригу.

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

ksa · #10 (**permalink**) 19.09.2013, 14:54

Сообщение от рони

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

Сообщение от vashurin

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

Именно так.

Форум

Справочник

Discord чат

Курсы javascript