表格行高亮，滑动变色代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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>
<title>表格高亮</title>
<style type="text/css">
body{
	font-size:8pt;
	font-family: sans-serif;
	margin:0px;
	padding:0px;
	}
	img{
	border:0px;
	}
	thead td{
	font-weight:bold;
	color:#000;
	background-color:#E2EBED;
	}
	td{
	padding:2px 4px;
	}
	table{
	border:1px solid #000;
	border-collapse: collapse;
	}
	table,h1,p,#ads{
	margin-left:10px;
	}
	#ads{
	margin-top:20px;
	}
	.tableRollOverEffect1{
	background-color:#317082;
	color:#FFF;
	}
	.tableRollOverEffect2{
	background-color:#000;
	color:#FFF;
	}
	
	.tableRowClickEffect1{
	background-color:#F00;
	color:#FFF;
	}
	.tableRowClickEffect2{
	background-color:#00F;
	color:#FFF;
	}
	.differ{ background-color: #fffee9; }
</style>
<script type="text/javascript">
	var tablehighlightEffect = {
		arrayOfRolloverClasses: [],
		arrayOfClickClasses:[],
		activeRowClickArray:[],
		activeRow:false,		
		highlightTableRow: function()
		{
			var o = tablehighlightEffect;
			var tableObj = this.parentNode;
			if(tableObj.nodeName != 'table') tableObj = tableObj.parentNode;
			if(this != o.activeRow){
				this.setAttribute('origCl',this.className);
				this.origCl = this.className;
			}
			this.className = o.arrayOfRolloverClasses[tableObj.id];
			o.activeRow = this;
		},
		clickOnTableRow: function()
		{
			var o = tablehighlightEffect;
			var tableObj = this.parentNode;
			if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;		
			if(o.activeRowClickArray[tableObj.id] && this != o.activeRowClickArray[tableObj.id]){
			o.activeRowClickArray[tableObj.id].className = '';
			}
			this.className = o.arrayOfClickClasses[tableObj.id];
			o.activeRowClickArray[tableObj.id] = this;
		},
		resetRowStyle: function()
		{
			var o = tablehighlightEffect;
			var tableObj = this.parentNode;
			if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
			if(o.activeRowClickArray[tableObj.id] && this == o.activeRowClickArray[tableObj.id]){
				this.className = o.arrayOfClickClasses[tableObj.id];
				return;	
			}
			var origCl = this.getAttribute('origCl');
			if(!origCl)origCl = this.origCl;
			this.className=origCl;
		},
		addTableRolloverEffect: function(tableId,whichClass,whichClassOnClick)
		{
			var o = tablehighlightEffect;
			o.arrayOfRolloverClasses[tableId] = whichClass;
			o.arrayOfClickClasses[tableId] = whichClassOnClick;
			var tableObj = document.getElementById(tableId);
			var tBody = tableObj.getElementsByTagName('tbody');
			var rows = (tBody[0] || tableObj).getElementsByTagName('tr');
			for(var no=0;no<rows.length;no++)
			{
				rows[no].onmouseover = o.highlightTableRow;
				rows[no].onmouseout  = o.resetRowStyle;
				if(whichClassOnClick){ rows[no].onclick = o.clickOnTableRow;}
			}
			
		}
	}
</script>
</head>
<body>
<table id="myTable">
	<thead>
		<tr>
			<td>Name</td>
			<td>Age</td>
			<td>Position</td>
			<td>Income</td>
			<td>Gender</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>37</td>
			<td>Managing director</td>
			<td>90.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Susan</td>
			<td>34</td>
			<td>Partner</td>
			<td>90.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>David</td>
			<td>29</td>
			<td>Head of production</td>
			<td>70.000</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>
<script type="text/javascript">
tablehighlightEffect.addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
tablehighlightEffect.addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

表格行高亮，滑动变色代码

分类

表格图层

描述

表格行高亮，隔行换色，鼠标滑动时变色，基于JavaScript+CSs实现的效果，应用广泛，实用简洁，值得收藏。