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

Aetae · #23 (**permalink**) 05.03.2011, 21:12

Чего тут сложного. Ставишь mouseover на всю таблицу, вычисляешь event.target/srcElement, находишь какой он по счёту(cellIndex) и меняешь у соответствующего col стиль.)

Кстати допилил чуток велосипед. Теперь он не зависит от ширины скроллбара и свободно растягивается на любую заданную ширину(можно и в процентах).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">window.onload=function(){
	var table=document.getElementsByTagName('table')[0];
	var cells=table.rows[table.rows.length-1].cells;
	var hoverDiv=document.createElement('div');
	hoverDiv.style.cssText="position:relative;height:10000px;margin-top:-10000px;background:#ddf;z-index:-1";
	table.onmouseover=function(e){
		var t=e?e.target:window.event.srcElement;
		while(t.tagName!='TD'&&t.tagName!='TABLE')t=t.parentNode;
		if(t.tagName=='TD') {
			cells[t.cellIndex].appendChild(hoverDiv);
		}
	}
}
</script>
<style type="text/css">
* {margin:0;padding:0}
.fHeader td, .fHeader tr{
	border:1px solid #bbb;
}
.fHeader {
	padding-top:24px;	/* высота загаловка, соот-но если больше 1 строки-увеличить. */
	width:100%; /*ширина*/
	height:102px;  /*высота - 24px на header,  -1px на нижний border*/
	/* background:#fdfffd; цвет таблицы по дефалту(не совместим с подсветкой колонок =) )*/
	font-family: MS Sans serif,Verdana,Arial;
	border-bottom:1px solid #bbb;
	position:relative;
	overflow:hidden;
}
.fHeaderScroll {
	border-right:1px solid #bbb;
	height:100%;
	overflow:auto;
	overflow-x:hidden;/*opera fix*/
}
.fHeader table {
	width:100%; 	
	border-collapse:collapse;
}
.fHeaderFix {
	zoom:1 /*ie fix*/
} 
.fHeader thead div{
	height:0;
	text-align:left;
	overflow:hidden;
}
.fHeader thead div div {
	height:22px; /* высота загаловка (-2px на border), соот-но если больше 1 строки-увеличить. */
	background:#ddd; /*цвет header'a по дефалту*/
	border:1px solid #aaa;
	position:absolute;
	top:0;
	width:300%;
	margin-left:-1px;
}
.fHeaderTop{
	margin-top:-24px; /* высота загаловка */
	height:22px; /* высота загаловка (-2px на border) */
	border:1px solid #aaa;
	position:relative;
	z-index:2;
}
.fHeader tfoot tr, .fHeader tfoot td {
	border-bottom:0 
}
.fHeader thead tr, .fHeader thead td{
	border-top:0;
}
</style>
</head>
<body>
<h3>Таблица спецсимволов html</h3>
<div class="fHeader">
	<div class="fHeaderTop">
	</div>
	<div class="fHeaderScroll">
		<div class="fHeaderFix">
			<table>
			<thead>
			<tr>
				<td>
					<div><div>Имя</div>Имя</div>
					 &amp;nbsp;
				</td>
				<td>
					<div><div>Код</div>Код</div>
					 &amp;#160;
				</td>
				<td>
					<div>	<div>Вид</div>Вид</div>
					 &nbsp;
				</td>
				<td>
					<div><div>Описание</div>Описание</div>
					 неразрывный пробел
				</td>
			</tr>
			</thead>
			<tbody>
			<tr><td>&amp;iexcl;</td><td>&amp;#161;</td><td>¡</td><td>перевернутый восклицательный знак</td></tr>
			<tr><td>&amp;cent;</td><td>&amp;#162;</td><td>¢</td><td>цент</td></tr>
			<tr><td>&amp;pound;</td><td>&amp;#163;</td><td>£</td><td>фунт стерлингов</td></tr>
			<tr><td>&amp;curren;</td><td>&amp;#164;</td><td>¤</td><td>денежная единица</td></tr>
			<tr><td>&amp;yen;</td><td>&amp;#165;</td><td>¥</td><td>иена или юань</td></tr>
			<tr><td>&amp;brvbar;</td><td>&amp;#166;</td><td>¦</td><td>разорванная вертикальная черта</td></tr>
			<tr><td>&amp;sect;</td><td>&amp;#167;</td><td>§</td><td>параграф</td></tr>
			<tr><td>&amp;uml;</td><td>&amp;#168;</td><td>¨</td><td>трема (знак над гласной для произнесения ее отдельно от предшествующей гласной; напр., na¨ve)</td></tr>
			<tr><td>&amp;copy;</td><td>&amp;#169;</td><td>©</td><td>знак copyright</td></tr>
			<tr><td>&amp;ordf;</td><td>&amp;#170;</td><td>ª</td><td>женский порядковый числитель</td></tr>
			<tr><td>&amp;laquo;</td><td>&amp;#171;</td><td>«</td><td>левая двойная угловая скобка</td></tr>
			<tr><td>&amp;not;</td><td>&amp;#172;</td><td>¬</td><td>знак отрицания</td></tr>
			<tr><td>&amp;shy;</td><td>&amp;#173;</td><td></td><td>место возможного переноса</td></tr>
			<tr><td>&amp;reg;</td><td>&amp;#174;</td><td>®</td><td>знак зарегистрированной торговой марки</td></tr>
			<tr><td>&amp;macr;</td><td>&amp;#175;</td><td>¯</td><td>знак долготы над гласным</td></tr>
			<tr><td>&amp;deg;</td><td>&amp;#176;</td><td>°</td><td>градус</td></tr>
			</tbody>
			<tfoot>
				<tr><td>&amp;bdquo;</td><td>&amp;#8222;</td><td>„</td><td>нижняя двойная кавычка</td></tr>
			</tfoot>
			</table>
		</div>
	</div>
</div>
</body>
</html>

.....upd
Ан нет, опера цучко не меняет динамически стиль у col, так что обломчик.

.....upd2
Добавил вариант подсветки колонок, не самый лучший, зато самый быстрый в случае больших таблиц.)
Велосипеды такие велосипеды.