[css提高] table美化-鼠标滑动单元格变色.

tension

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2008-6-13 10:58 只看该作者

table美化-鼠标滑动单元格变色.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>orbitz-like behavior for hovering over table cells</title>
<style type="text/css">
.cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;}
.cssguycomments p {font:normal 12px/18px verdana;}

table	{border-collapse:collapse;}
thead th {
	font:bold 13px/18px georgia;
	text-align:left;
	background:#fff4c6;
	color:#333;
	padding:8px 16px 8px 8px;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
}
thead th.null {background:#fff;}
tbody th {
	font:bold 12px/15px georgia;
	text-align:left;
	background:#fff9e1;
	color:#333;
	padding:8px;
	border-bottom:1px solid #f3f0e4;
	border-right:1px solid #fff;
}
tbody td {
	font:normal 12px/15px georgia;
	color:#333;
	padding:8px;
	border-right:1px solid #f3f0e4;
	border-bottom:1px solid #f3f0e4;
}
/*  这3个是关键   --pickbar.com */
tbody td.on {background:green;}   
thead th.on {background:red;}
tbody th.on {background:red;}
</style>

function addClassName(elm, className){
    var currentClass = elm.className;
    if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){
        elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className;
    }
    return elm.className;
}

function removeClassName(elm, className){
    var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
    elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, "");
    return elm.className;
}

function makeTheTableHeadsHighlight() {
	// get all the td's in the heart of the table...
	var table = document.getElementById('rockartists');
	var tbody = table.getElementsByTagName('tbody');
	var tbodytds = table.getElementsByTagName('td');
	
	// and loop through them...
	for (var i=0; i<tbodytds.length; i++) {
	
	// take note of their default class name
		tbodytds[i].oldClassName = tbodytds[i].className;
		
	// when someone moves their mouse over one of those cells...
		tbodytds[i].onmouseover = function() {
	
	// attach 'on' to the pointed cell
			addClassName(this,'on');
			
	// attach 'on' to the th in the thead with the same class name
			var topheading = getElementsByClassName(this.oldClassName,'th',table);
			addClassName(topheading[0],'on');
			
	// attach 'on' to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName('th')[0];
			addClassName(rowheading,'on');
		}
	
	// ok, now when someone moves their mouse away, undo everything we just did.
	
		tbodytds[i].onmouseout = function() {
	
	// remove 'on' from this cell
			removeClassName(this,'on');
			
	// remove 'on' from the th in the thead
			var topheading = getElementsByClassName(this.oldClassName,'th',table);
			removeClassName(topheading[0],'on');

// remove 'on' to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName('th')[0];
			removeClassName(rowheading,'on');
		}
	}
}
addLoadEvent(makeTheTableHeadsHighlight);
</script>
</head>
<body>

<div class="cssguycomments">
<p>Final example with JavaScript applied.  Hover over a table cell to see effects.  "View Source" and copy if you'd like to use.</p>
</div>

<table id="rockartists">
	<thead>
		<tr>
			<th class="null"> </th>
			<th class="stones">Rolling Stones</th>
			<th class="u2">U2</th>
			<th class="crue">Mötley Crüe</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Lead Vocals</th>
			<td class="stones">Mick Jagger</td>
			<td class="u2">Bono</td>
			<td class="crue">Vince Neil</td>
		</tr>
		<tr>
			<th>Lead Guitar</th>
			<td class="stones">Keith Richards</td>
			<td class="u2">The Edge</td>
			<td class="crue">Mick Mars</td>
		</tr>
		<tr>
			<th>Bass Guitar</th>
			<td class="stones">Ron Wood</td>
			<td class="u2">Adam Clayton</td>
			<td class="crue">Nikkie Sixx</td>
		</tr>
		<tr>
			<th>Drums</th>
			<td class="stones">Charlie Watts</td>
			<td class="u2">Larry Mullen, Jr.</td>
			<td class="crue">Tommy Lee</td>
		</tr>
	</tbody>
</table>

</body>

</html>

提示：您可以先修改部分代码再运行

TOP

‹‹ 上一主题 | 下一主题 ››

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜