比较高级的JavaScript表格高亮类的应用

小提示

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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格高亮</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style type="text/css">
		* {
			font-size: 11px;
			font-family: verdana, arial, sans-serif;
		}
		
		table {
			border: 1px solid #ccc;
			margin: 0 auto;
		}
		
		th {
			background-color: #f7f7f7;
		}
		
		td, th {
			padding: 15px;
			border: 1px solid #ccc;
		}
		
		tr.alternate {
			background-color: #efd;
		}
		
		.bold {
			font-weight: bold;
		}
		
		.red {
			color: red;
			font-weight: bold;
		}
		
		.blue {
			background-color: blue;
		}
		
		.hoverHilight {
			background-color: #ffffc0;
			cursor: pointer;
		}
		
		.activeCellHilight {
			background-color: #c0dbff;
			color: blue;
		}
	</style>
	
	<script type="text/JavaScript">
	var hilightClass = "hoverHilight";
var activeHilightClass = "activeCellHilight";
var hilightActive = 1;
var hilightCol = 1;
var hilightRow = 1;
var hilightTopHeader = 0;
var hilightLeftHeader = 0;
var hilightRightHeader = 0;
var hilightBottomHeader = 0;
var surroundActive = 0;	
function initCrossHairsTable(id, topPad, rightPad, bottomPad, leftPad) {
	var tableObj = document.getElementById(id);
	var c = tableObj.rows[0].cells.length - rightPad;
	var r = tableObj.rows.length - bottomPad;
	for (var i = topPad; i < r; i++)
	{
		for (var j = leftPad; j < c; j++)
		{
			if(!document.all) {
				tableObj.rows[i].cells[j].setAttribute("onmouseover","addHilight(this);");
				tableObj.rows[i].cells[j].setAttribute("onmouseout","removeHilight(this);");
			}
			else
			{
				tableObj.rows[i].cells[j].onmouseover = function() { addHilight(this); }
				tableObj.rows[i].cells[j].onmouseout = function() { removeHilight(this); }
			}
		}
	}
}
function addHilight(cell)
{
	applyHilight(cell.parentNode.parentNode.parentNode, 
	cell.parentNode.rowIndex, cell.cellIndex, 1);
}
function removeHilight(cell)
{
	applyHilight(cell.parentNode.parentNode.parentNode, 
	cell.parentNode.rowIndex, cell.cellIndex, 0);
}
var oldRowClasses = "";	
var oldHeaderClasses = "";
var oldCellClasses = new Array();
function applyHilight(obj, rowIndex, colIndex, state)
{
	var W3CDOM = (document.createElement && document.getElementsByTagName);
	if (!W3CDOM)
	{
		alert("This script requires W3C DOM support")
		return;
	}
	if (hilightClass == "") alert("Please set a hilight class.");
	if (hilightRow) applyHilightRow(obj, rowIndex, colIndex, state);
	if (hilightCol) applyHilightCol(obj, rowIndex, colIndex, state);
	if (hilightTopHeader) applyHilightTopHeader(obj, rowIndex, colIndex, state);
	if (hilightLeftHeader) applyHilightLeftHeader(obj, rowIndex, colIndex, state);
	if (hilightRightHeader) applyHilightRightHeader(obj, rowIndex, colIndex, state);
	if (hilightBottomHeader) applyHilightBottomFooter(obj, rowIndex, colIndex, state);
	if (hilightActive) applyHilightActiveCell(obj, rowIndex, colIndex, state);
	if (surroundActive) applySurroundActiveHilight(obj, rowIndex, colIndex, state);
}
function applyHilightLeftHeader(obj, rowIndex, colIndex, state)
{
	var classArray;
	var rowClasses = "";
	
	if (state == 1)
	{
		obj.rows[rowIndex].cells[0].className += " " + hilightClass;	
	}
	else
	{
		classArray = obj.rows[rowIndex].cells[0].className.split(" ");
		for(var i = 0; i < (classArray.length - 1); i++)
			if(classArray[i] != "") rowClasses += " " + classArray[i];
		obj.rows[rowIndex].cells[0].className = rowClasses;
	}
}
function applyHilightRightHeader(obj, rowIndex, colIndex, state)
{
	var classArray;
	var rowClasses = "";
	
	if (state == 1)
	{
		obj.rows[rowIndex].cells[obj.rows[rowIndex].cells.length-1].className += " " + hilightClass;
	}
	else
	{
		classArray = obj.rows[rowIndex].cells[obj.rows[rowIndex].cells.length-1].className.split(" ");
		for(var i = 0; i < (classArray.length - 1); i++)
			if(classArray[i] != "") rowClasses += " " + classArray[i];
		obj.rows[rowIndex].cells[obj.rows[rowIndex].cells.length-1].className = rowClasses;
	}
}
function applyHilightTopHeader(obj, rowIndex, colIndex, state)
{
	var classArray;
	var colClasses = "";
	if (state == 1)
	{
		obj.rows[0].cells[colIndex].className += " " + hilightClass;	
	}
	else
	{
		classArray = obj.rows[0].cells[colIndex].className.split(" ");
		for(var i = 0; i < (classArray.length - 1); i++)
			if(classArray[i] != "") colClasses += " " + classArray[i];
		obj.rows[0].cells[colIndex].className = colClasses;
	}
}
function applyHilightBottomFooter(obj, rowIndex, colIndex, state)
{
	var classArray;
	var colClasses = "";
	if (state == 1)
	{
		obj.rows[obj.rows.length-1].cells[colIndex].className += " " + hilightClass;	
	}
	else
	{
		classArray = obj.rows[obj.rows.length-1].cells[colIndex].className.split(" ");
		for(var i = 0; i < (classArray.length - 1); i++)
			if(classArray[i] != "") colClasses += " " + classArray[i];
		obj.rows[obj.rows.length-1].cells[colIndex].className = colClasses;
	}
}
function applyHilightRow(obj, rowIndex, colIndex, state)
{
	if (state == 1) 
	{
		oldRowClasses = obj.rows[rowIndex].className;
		obj.rows[rowIndex].className = hilightClass;	
	}
	else
	{
		obj.rows[rowIndex].className = oldRowClasses; 
	}
}
function applyHilightCol(obj, rowIndex, colIndex, state)
{
	var cellClasses = new Array();
	if (state == 1) 
	{
		for(var i = 0; i < obj.rows.length; i++)
		{
			cellClasses.push(obj.rows[i].cells[colIndex].className);
			obj.rows[i].cells[colIndex].className += " " + hilightClass;
		}
		
		oldCellClasses = cellClasses;	
	}
	else
	{
		oldCellClasses.reverse();
		for(var i = 0; i < obj.rows.length; i++)
			obj.rows[i].cells[colIndex].className = oldCellClasses.pop();
	}
}

var oldActiveCellClasses;
function applyHilightActiveCell(obj, rowIndex, colIndex, state)
{
	if (state == 1)
	{
		oldActiveCellClasses = null;
		oldActiveCellClasses = obj.rows[rowIndex].cells[colIndex].className;
		obj.rows[rowIndex].cells[colIndex].className += " " + activeHilightClass;
	}
	else
	{
		var oldClasses = oldActiveCellClasses.split(" ");
		obj.rows[rowIndex].cells[colIndex].className = "";
		for(var i = 0; i < oldClasses.length; i++)
		{	
			if(oldClasses[i] != hilightClass) obj.rows[rowIndex].cells[colIndex].className += " " + oldClasses[i];
			oldActiveCellClasses = "";
		}
	}
}
function applySurroundActiveHilight(obj, rowIndex, colIndex, state)
{
	
	var surroundRadius = 1;
	var radiusColor = "#c0dbff"
	var cell;
	if(!parseInt(surroundRadius)) return;
	if (state == 1)
	{
		for(var i = (rowIndex - surroundRadius); i <= (rowIndex + surroundRadius); i++)
		{
			if (i < 0) continue;
			if (!obj.rows[i]) continue;
			for(var j = (colIndex - surroundRadius); j <= (colIndex + surroundRadius); j++)
			{
				if (j < 0) continue;
				if (!obj.rows[i].cells[j]) continue;
				cell = obj.rows[i].cells[j].style
				cell.backgroundColor = radiusColor;	
			    cell.opacity = (.5);
			    cell.MozOpacity = (.5);
			    cell.KhtmlOpacity = (.5);
			    cell.filter = "alpha(opacity=50)";
			}
		}
		obj.rows[rowIndex].cells[colIndex].style.backgroundColor = "";
	}
	else
	{
		for(var i = (rowIndex - surroundRadius); i <= (rowIndex + surroundRadius); i++)
		{
			if (i < 0) continue;
			if (!obj.rows[i]) continue;
			for(var j = (colIndex - surroundRadius); j <= (colIndex + surroundRadius); j++)
			{
				if (j < 0) continue;
				if (!obj.rows[i].cells[j]) continue;
				cell = obj.rows[i].cells[j].style
				cell.backgroundColor = "";	
			    cell.opacity = (1);
			    cell.MozOpacity = (1);
			    cell.KhtmlOpacity = (1);
			    cell.filter = "alpha(opacity=100)";
			}
		}
	}
}
</script>
</head>
<body>
<table id="crossTable">
		<tr>
			<th>&nbsp;</th>
			<th>编号</th>
			<th>姓名</th>
			<th>地址</th>
			<th>电话</th>
		</tr>
		<tr>
			<td class="bold">1</td>
			<td onmouseover="addHilight(this);" onmouseout="removeHilight(this);">a1</td>
			<td>b1</td>
			<td>c1</td>
			<td>d1</td>
		</tr>
		<tr class="alternate">
			<td class="bold">2</td>
			<td>a2</td>
			<td>b2</td>
			<td>c2</td>
			<td>d2</td>
		</tr>
		<tr>
			<td class="bold">3</td>
			<td>a3</td>
			<td>b3</td>
			<td>c3</td>
			<td>d3</td>
		</tr>
		<tr class="alternate">
			<td class="bold">4</td>
			<td>a4</td>
			<td>b4</td>
			<td>c4</td>
			<td>d4</td>
		</tr>
		<tr>
			<td class="bold">5</td>
			<td>a5</td>
			<td>b5</td>
			<td>c5</td>
			<td>d5</td>
		</tr>
	
</table>
<script type="text/javascript">
initCrossHairsTable("crossTable", 1, 0, 0, 1);//控制
</script>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

比较高级的JavaScript表格高亮类的应用

分类

表格图层

描述

比较高级的JavaScript表格高亮类的应用，代码中的Js可以摘出来单独作为一个表格高亮的修饰类，使用很方便，可以控制表格某行、某列甚至是行列同时高亮显示，运行一下可以看效果。