pafnuty · February 12, 2013 08:57
diff --git a/table.html b/table.html
 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Подсветка колонки при клике на ячейку</title>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 	<script>
 		jQuery(document).ready(function($) {
 			$('table').on('click', 'td', function () {
 				var thisIndex = $(this).index();
 				// console.log(thisIndex);
 				$('table tr').each(function(){
 					$(this).children('td').each(function(td_num){
 						if(td_num==thisIndex){
 							$(this).addClass('selected').siblings().removeClass('selected'); 
 						}
 					})
 				})
 			});
 		});
 	</script>
 	<style>
 		table {
 			border-collapse: collapse;
 			border-spacing: 0;
 			margin: 50px auto;
 		}

 		table td {
 			border: solid 1px transparent;
 			border-bottom: solid 1px #ccc;
 			border-right: none;
 			padding: 5px 6px;
 		}
 		table tr:last-child td {
 			border-bottom-color: transparent;
 		}
 		td.selected {
 			border-left: solid 1px #f96;
 			border-right: solid 1px #f96;
 			background: #fafafa;
 		}
 		td.selected:last-child {
 			padding: 5px 5px 5px 6px; /* нужно убавлять отступ на 1px у последних ячеек, что бы не прыгал размер*/
 		}
 		table tr:first-child td.selected {
 			border-top: solid 1px #f96;
 		}
 		table tr:last-child td.selected {
 			border-bottom: solid 1px #f96;
 		}

 	</style>
 </head>
 <body>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil amet asperiores id animi voluptas labore molestias deleniti et debitis quibusdam nisi assumenda odit exercitationem rem recusandae perferendis fugit maiores!</p>
 	<table>
 		<tr>
 			<td>колонка 1</td>
 			<td>колонка 2</td>
 			<td>колонка 3</td>
 			<td>колонка 4</td>
 			<td>колонка 5</td>
 			<td>колонка 6</td>
 		</tr>
 		<tr>
 			<td>колонка 1</td>
 			<td>колонка 2</td>
 			<td>колонка 3</td>
 			<td>колонка 4</td>
 			<td>колонка 5</td>
 			<td>колонка 6</td>
 		</tr>
 		<tr>
 			<td>колонка 1</td>
 			<td>колонка 2</td>
 			<td>колонка 3</td>
 			<td>колонка 4</td>
 			<td>колонка 5</td>
 			<td>колонка 6</td>
 		</tr>
 		<tr>
 			<td>колонка 1</td>
 			<td>колонка 2</td>
 			<td>колонка 3</td>
 			<td>колонка 4</td>
 			<td>колонка 5</td>
 			<td>колонка 6</td>
 		</tr>
 	</table>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repudiandae illum magnam autem ipsam! Sapiente eum aut similique nihil aliquam aliquid obcaecati ullam possimus temporibus unde animi iste natus doloremque?</p>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Подсветка колонки при клике на ячейку</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script>
	jQuery(document).ready(function($) {
	$('table').on('click', 'td', function () {
	var thisIndex = $(this).index();
	// console.log(thisIndex);
	$('table tr').each(function(){
	$(this).children('td').each(function(td_num){
	if(td_num==thisIndex){
	$(this).addClass('selected').siblings().removeClass('selected');
	}
	})
	})
	});
	});
	</script>
	<style>
	table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 50px auto;
	}

	table td {
	border: solid 1px transparent;
	border-bottom: solid 1px #ccc;
	border-right: none;
	padding: 5px 6px;
	}
	table tr:last-child td {
	border-bottom-color: transparent;
	}
	td.selected {
	border-left: solid 1px #f96;
	border-right: solid 1px #f96;
	background: #fafafa;
	}
	td.selected:last-child {
	padding: 5px 5px 5px 6px; /* нужно убавлять отступ на 1px у последних ячеек, что бы не прыгал размер*/
	}
	table tr:first-child td.selected {
	border-top: solid 1px #f96;
	}
	table tr:last-child td.selected {
	border-bottom: solid 1px #f96;
	}

	</style>
	</head>
	<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil amet asperiores id animi voluptas labore molestias deleniti et debitis quibusdam nisi assumenda odit exercitationem rem recusandae perferendis fugit maiores!</p>
	<table>
	<tr>
	<td>колонка 1</td>
	<td>колонка 2</td>
	<td>колонка 3</td>
	<td>колонка 4</td>
	<td>колонка 5</td>
	<td>колонка 6</td>
	</tr>
	<tr>
	<td>колонка 1</td>
	<td>колонка 2</td>
	<td>колонка 3</td>
	<td>колонка 4</td>
	<td>колонка 5</td>
	<td>колонка 6</td>
	</tr>
	<tr>
	<td>колонка 1</td>
	<td>колонка 2</td>
	<td>колонка 3</td>
	<td>колонка 4</td>
	<td>колонка 5</td>
	<td>колонка 6</td>
	</tr>
	<tr>
	<td>колонка 1</td>
	<td>колонка 2</td>
	<td>колонка 3</td>
	<td>колонка 4</td>
	<td>колонка 5</td>
	<td>колонка 6</td>
	</tr>
	</table>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repudiandae illum magnam autem ipsam! Sapiente eum aut similique nihil aliquam aliquid obcaecati ullam possimus temporibus unde animi iste natus doloremque?</p>
	</body>
	</html>