Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2013, 21:00
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Подсветка родительских ячеек таблицы
Подскажите, как реализовать, чтобы при наведении курсора на ячейку таблицы, подсвечивались все ячейки сверху и слева относительно данной до родительских ячеек (включая их), расположенных на первой сроке и первом столбце?

Нашел почти то, что нужно http://scriptsite.ru/examples/20091127/example6.html только бы ещё "хвосты обрубить".
Ответить с цитированием
  #2 (permalink)  
Старый 10.02.2013, 21:03
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Demath,
Чо за хвосты?
Ответить с цитированием
  #3 (permalink)  
Старый 10.02.2013, 21:22
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

На картинке перечеркнуты красным, то есть чтобы не подсвечивало ячейки справа и снизу от ячейки, на которую навели курсор

Ответить с цитированием
  #4 (permalink)  
Старый 10.02.2013, 21:58
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Подсветка колонок таблиц с jQuery</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>  


<script type="text/javascript">

$(document).ready(function () {

    $('body').on('mouseenter','#tableone td',function () { //alert("A")
        var tr = $(this).parent('tr');
        var Col = tr.find('td').index(this);
        var Span = $('#tableone tr').index(tr.get(0));
        tr.find('td:lt(' + Col + ')').addClass('hover');
        $('#tableone tr:lt(' + Span + ')').find('td:eq(' + Col + ')').addClass('hover');

    }).on('mouseleave','#tableone td',function () { 
        $('#tableone td').removeClass('hover');
    });
});

</script>

</head>

<body>
<style type="text/css">
	body {
		background-color:#f0f0f0;	
	}

	table {
		width:600px;
		margin:0 auto;
		font-family:Arial, Helvetica, sans-serif;
		border-spacing:0px;
	}

	td:hover, td.betterhover, td.hover {
		background-color:#c0e2ff;	
		box-shadow:0 0 1px #006fcd;
	}
	
</style>

<table id="tableone">
		<tbody>
			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>

			<tr><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
			<tr><td>-</td><td>-</td><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>X</td></tr>

			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>X</td></tr>
			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>X</td></tr>

			<tr><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td></tr>
			<tr><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>

			<tr><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>X</td><td>-</td></tr>
			<tr><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td></tr>

			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
			<tr><td>X</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>

		</tbody>
	</table>

</body>
</html>

Последний раз редактировалось Deff, 11.02.2013 в 05:38.
Ответить с цитированием
  #5 (permalink)  
Старый 10.02.2013, 23:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,829

Deff,
немного сократил ваш код.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Подсветка колонок таблиц с jQuery</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>


<script type="text/javascript">

$(document).ready(function () {

    $('#tableone td').mouseenter(function () { //alert("A")
        var tr = $(this).parent('tr');
        var Col = tr.find('td').index(this);
        var Span = $('#tableone tr').index(tr.get(0));
        tr.find('td:lt(' + Col + ')').addClass('hover');
        $('#tableone tr:lt(' + Span + ')').find('td:eq(' + Col + ')').addClass('hover');

    }).mouseleave(function () {
        $('#tableone td').removeClass('hover');
    });
});

</script>

</head>

<body>
<style type="text/css">
	body {
		background-color:#f0f0f0;
	}

	table {
		width:600px;
		margin:0 auto;
		font-family:Arial, Helvetica, sans-serif;
		border-spacing:0px;
	}

	td:hover, td.betterhover, td.hover {
		background-color:#c0e2ff;
		box-shadow:0 0 1px #006fcd;
	}

</style>

<table id="tableone">
		<tbody>
			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>

			<tr><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
			<tr><td>-</td><td>-</td><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>X</td></tr>

			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>X</td></tr>
			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>X</td></tr>

			<tr><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td></tr>
			<tr><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>

			<tr><td>X</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>X</td><td>-</td></tr>
			<tr><td>X</td><td>-</td><td>X</td><td>-</td><td>X</td><td>-</td><td>-</td><td>-</td></tr>

			<tr><td>X</td><td>-</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
			<tr><td>X</td><td>X</td><td>X</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>

		</tbody>
	</table>

</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2013, 00:18
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

рони,
Ксать в ИЕ6-7 Ваша версия значительно пошустрее
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2013, 03:16
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Всем спасибо!


Подскажите, ещё, пожалуйста, как вызывать эту функция для таблицы, которая не загружается вместе со страницей (как обычно), а генерируется скриптом после нажатия кнопки пользователем (onclick)?

Не могу разрулить самостоятельно
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2013, 03:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Попробуйте так
<script type="text/javascript">

$(document).ready(function () {

    $('body').on('mouseenter','#tableone td',function () { //alert("A")
        var tr = $(this).parent('tr');
        var Col = tr.find('td').index(this);
        var Span = $('#tableone tr').index(tr.get(0));
        tr.find('td:lt(' + Col + ')').addClass('hover');
        $('#tableone tr:lt(' + Span + ')').find('td:eq(' + Col + ')').addClass('hover');

    }).on('mouseleave','#tableone td',function () { 
        $('#tableone td').removeClass('hover');
    });
});

</script>

Последний раз редактировалось Deff, 11.02.2013 в 05:41.
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2013, 04:00
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Deff,

Не хватало двух закрывающих круглых скобок, добавил.
Но всё равно Хром пишет:

"Uncaught TypeError: Object [object Object] has no method 'on' ".


Спасибо за помощь.
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2013, 05:39
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Demath,
Поправил в своем сообщении со скриптом (В принципе вместо body - лучше ставить ближайшую не перезагружаемую Аяксом обертку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
IE 8: баг при динамическом display=none; у ячеек таблицы SegaMega Элементы интерфейса 0 21.09.2012 06:47
Не выводится содержимое ячеек таблицы SER Events/DOM/Window 2 23.06.2011 17:48
Подсветка столбцов таблицы ctocopok Элементы интерфейса 31 14.06.2011 01:42
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 01:28
Добраться до ячеек таблицы через DOM twolf Events/DOM/Window 11 21.01.2009 17:29