CSS+HTML实例集合二，表格行颜色间隔显示，加有鼠标移入移出高亮效果，还有单击选中高亮再单击消除高亮

最新推荐文章于 2024-04-19 12:50:41 发布

King·Forward

最新推荐文章于 2024-04-19 12:50:41 发布

阅读量3.7k

点赞数

分类专栏： JavaWeb 文章标签： html css function table class border

本文链接：https://blog.csdn.net/wjw_java_android/article/details/8057526

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

CSS_HTML实例集合二，表格行颜色间隔显示，加有鼠标移入移出高亮效果，还有单击选中高亮再单击消除高亮

<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
	table{
	border:1px solid #0000FF;
	width:500px;
	border-collapse:collapse;/*将表格边框与单元格边框合并*/}
	table td,table th{
	border:#990000 1px solid; 
	padding:10px 0px 10px 10px;/*设定单元格中文字距离单元格边框的边距，分别为上右下左*/
	}
	table th{
	background-color:#006666;}
	
	.color1{
	background-color:#3399FF}
	.color2{
	background-color:#999933}
	.heightLight{
	background-color:#FF0000;/*高亮显示*/}
	#tr_click{
	background-color:#0000FF;}
	.tr_click{
	background-color:#CCFF00;}
</style>

<body>
<table>
	<!--<tr οnmοuseοver="over(this);">第一行因为已经写死了，再写js调整的话，就不会出现调整的效果了，因为优先级没有直接设定的高-->
	<tr>	
		<th>各个电影</th>
		<th>电影评论</th>
		<th>主演</th>
	</tr>
	<tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr>
	<tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr>
	<tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr>
	<tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr>
	<tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr>
	<tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr><tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr><tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr>
	<tr οnmοuseοver="over(this);" οnmοuseοut="out_tr(this)">
		<td>水浒传</td>
		<td>108个好汉</td>
		<td>松江，林冲，鲁智深，卢俊义等等</td>
	</tr>
</table>
</body>
<script type="text/javascript">
	var class_name;//声明全局变量，用来存储数据
	var class_click;
	/*
		对表格中的数据进行 行颜色的间隔显示
			1，获取表格对象
			2，获取表格中所有的行对象
			3，对表格行对象进行动态的样式加载
	*/
	window.οnlοad=function(){
		list();
	};
	function list(){
		var table=document.getElementsByTagName("table")[0];/*获取表格对象*/
		var trNodes=table.rows;//获取表格对象中所有的行的对象集合 
		for(var i=1;i<trNodes.length;i++){/*这里从第二行开始的，因为第一行为标题行，不需要变化。*/
			if(i%2==1){
				trNodes[i].className="color1";
			}else{
				trNodes[i].className="color2";
			}
			//添加下面的代码是第二种方式，这种方式可以使代码更简练
			trNodes[i].οnmοuseοver=function(){
				class_name=this.className;
				this.className="heightLight";
			}
			trNodes[i].οnmοuseοut=function(){
				this.className=class_name;
			}
			//行选中高亮===========================================行选中高亮设置=========================================================
			trNodes[i].οnclick=function(){
				//this.className="tr_click";//直接用class来改变,但达不到效果（效果就是点击一下改变样式，在点击一下还原） 
				if(this.id=="tr_click"){
					this.id="";
				}else{
					this.id="tr_click";
				}
			}
		}
	}
	/*
	//鼠标移入改变的样式设置，方式一
	function over(on_over){
		on_over.className="heightLight";
	}
	//鼠标移出改变的样式设置，方式一
	function out_tr(tr_out){
		list();
	}
	
	
	
	//鼠标移入改变的样式设置，方式二
	function over(on_over){
		class_name=on_over.className;//把原来的class的值记录下来，在鼠标移出时再调用
		on_over.className="heightLight";
	}
	//鼠标移出改变的样式设置，方式二
	function out_tr(tr_out){
		tr_out.className=class_name;
	}
	*/
//	
	
	/*
		注意以上两种方式都是在表格中tr标签中添加 onmouseover和onmouseout事件完成的，下面不用这种方式完成
		直接写在list函数中了，去看吧
	*/
	
</script>
</html>

King·Forward

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS+HTML实例集合二，表格行颜色间隔显示，加有鼠标移入移出高亮效果，还有单击选中高亮再单击消除高亮

CSS_HTML实例集合二，表格行颜色间隔显示，加有鼠标移入移出高亮效果，还有单击选中高亮再单击消除高亮无标题文档 table{ border:1px solid #0000FF; width:500px; border-collapse:collapse;/*将表格边框与单元格边框合并*/} table td,table th{ border:#990000
复制链接

扫一扫