Javascript-форум - Показать сообщение отдельно

Octane · #16 (**permalink**) 25.12.2008, 15:58

Как-то так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
border-spacing: 0;
border-collapse: collapse;
}
table, td, th {
border: 1px solid #ccc;
}
tr.selected {
background: #ffc;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function() {
	var rows = $('table').click(function(e) {
		var node = $(e.target);
		if(node.is('td')) {
			rows.removeClass('selected');
			node = node.parent().addClass('selected');
			if(node.children().attr('rowspan') == 2) node.next().addClass('selected');
			else if(node.prev().children().attr('rowspan') == 2) node.prev().addClass('selected');
		}
	}).find('tbody tr');
});
</script>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>Заголовок 1</th>
				<th>Заголовок 2</th>
				<th>Заголовок 3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">Ячейка</td>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td rowspan="2">Ячейка</td>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td>Ячейка</td>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td rowspan="2">Ячейка</td>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td>Ячейка</td>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
			<tr>
				<td>Ячейка</td>
				<td>Ячейка</td>
				<td>Ячейка</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

работает только для rowspan == 2