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

答案：<!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]
上一个：CSS 实用的表格约束功能实例
下一个：Js动态对齐表格内的内容
更多图片编程知识: