Выделение ячейки на пересечении строки и столбца / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выделение ячейки на пересечении строки и столбца

4 сообщений из 29, страница 2 из 2

все

Выделение ячейки на пересечении строки и столбца

#38060859

Гость

TABLER,

в ие 7 работать не будет
скриптом только или через классы
или забить на ие 7(это оптимальный вариант)

...

Рейтинг:

0 / 0

01.12.2012, 06:38

| Ответить | Цитировать | Написать

Выделение ячейки на пересечении строки и столбца

#38061066

stopkran

Гость

не надо бегать циклами там, где можно использовать структуры CSS:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

<!DOCTYPE html>
<html>	
<head>
	<style type="text/css">
		td {border:1px solid #ccc;}
		tr:hover, .green {background-color:#cfc;}
		.c0 .td0, .c1 .td1, .c2 .td2, .c3 .td3 {background-color:#cfc;}
		#mytable td:hover, #mytable .fff {background-color:#fff;}
		#mytable {table-layout:fixed; width:200px; border-collapse:collapse; margin:5em auto;}
	</style>
</head>
<body>
	<table id="mytable">
	<col id="col_0"><col id="col_1"><col id="col_2"><col id="col_3">
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
	</table>
	<script type="text/javascript">
		var table = document.getElementById('mytable');
			
		table.onmouseout = function (e) {this.className = '';}
		
		table.onmouseover = function (e) {
			e = e || window.event;
			var target = e.target || e.srcElement;
			if (typeof target.cellIndex !== 'undefined') {
				this.className = 'c' + target.cellIndex;
			}
		};
	</script>
</body>
</html>

Посмотреть в работе: http://ir2.ru/krest2.html (не нашёл нигде iE7, в IE8 вроде работает нормально).

...

Рейтинг:

0 / 0

01.12.2012, 15:39

| Ответить | Цитировать | Написать

Выделение ячейки на пересечении строки и столбца

#38061078

stopkran

Гость

Нашёл iE6! Вспомнил старину: там :hover работает только для ссылок. Переделал схему работы, допилил немного, теперь работает в IE6:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

<!DOCTYPE html>
<html>	
<head>
	<style type="text/css">
		td {border:1px solid #ccc;}
		.green, .c0 .td0, .c1 .td1, .c2 .td2, .c3 .td3 {background-color:#cfc;}
		.fff {background-color:#fff;}
		#mytable {table-layout:fixed; width:200px; border-collapse:collapse; margin:5em auto;}
	</style>
</head>
<body>
	<table id="mytable">
	<col id="col_0"><col id="col_1"><col id="col_2"><col id="col_3">
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
		<tr><td class="td0">a</td><td class="td1">b</td><td class="td2">c</td><td class="td3">d</td></tr>
	</table>
	<script type="text/javascript">
		var table = document.getElementById('mytable');
			
		table.onmouseout = function (e) {
			e = e || window.event;
			var target = e.target || e.srcElement;
			this.className = '';
			target.parentNode.className = '';
			target.style.backgroundColor = ''
		}
		
		table.onmouseover = function (e) {
			e = e || window.event;
			var target = e.target || e.srcElement;
			if (typeof target.cellIndex !== 'undefined') {
				this.className = 'c' + target.cellIndex;
				target.parentNode.className = 'green'
				target.style.backgroundColor = '#fff'
			}
		};
	</script>
</body>
</html>

...

Рейтинг:

0 / 0

01.12.2012, 16:08

| Ответить | Цитировать | Написать

Выделение ячейки на пересечении строки и столбца

#38063864

TABLER

Гость

Спасибо всем огромное за ответы.

...

Рейтинг:

0 / 0

04.12.2012, 10:47

| Ответить | Цитировать | Написать

4 сообщений из 29, страница 2 из 2

все

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&startmsg=38060859&tid=1449020]:	0ms
get settings:	9ms
get forum list:	16ms
check forum access:	3ms
check topic access:	3ms
track hit:	228ms
get topic data:	8ms
get forum data:	2ms
get page messages:	33ms
get tp. blocked users:	1ms
others:	240ms

total:	543ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы