10.02.2013, 22:00
|
 |
Профессор
|
|
Регистрация: 22.06.2012
Сообщений: 168
|
|
|
Подсветка родительских ячеек таблицы
Подскажите, как реализовать, чтобы при наведении курсора на ячейку таблицы, подсвечивались все ячейки сверху и слева относительно данной до родительских ячеек (включая их), расположенных на первой сроке и первом столбце?
Нашел почти то, что нужно http://scriptsite.ru/examples/20091127/example6.html только бы ещё "хвосты обрубить". |
|
10.02.2013, 22:03
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Demath,
Чо за хвосты?
|
|
10.02.2013, 22:22
|
|
Профессор
|
|
Регистрация: 22.06.2012
Сообщений: 168
|
|
На картинке перечеркнуты красным, то есть чтобы не подсвечивало ячейки справа и снизу от ячейки, на которую навели курсор
 |
|
10.02.2013, 22:58
|
|
без статуса
|
|
Регистрация: 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 в 06:38.
|
|
11.02.2013, 00:20
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
|
|
11.02.2013, 01:18
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
рони,
Ксать в ИЕ6-7 Ваша версия значительно пошустрее
|
|
11.02.2013, 04:16
|
|
Профессор
|
|
Регистрация: 22.06.2012
Сообщений: 168
|
|
Всем спасибо!
Подскажите, ещё, пожалуйста, как вызывать эту функция для таблицы, которая не загружается вместе со страницей (как обычно), а генерируется скриптом после нажатия кнопки пользователем (onclick)?
Не могу разрулить самостоятельно  |
|
11.02.2013, 04:33
|
|
без статуса
|
|
Регистрация: 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 в 06:41.
|
|
11.02.2013, 05:00
|
|
Профессор
|
|
Регистрация: 22.06.2012
Сообщений: 168
|
|
|
Deff,
Не хватало двух закрывающих круглых скобок, добавил.
Но всё равно Хром пишет:
"Uncaught TypeError: Object [object Object] has no method 'on' ".
Спасибо за помощь.
|
|
11.02.2013, 06:39
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Demath,
Поправил в своем сообщении со скриптом (В принципе вместо body - лучше ставить ближайшую не перезагружаемую Аяксом обертку
|
|
|
|
