比較高級的JavaScript表格高亮類的應用_層和布局特效

比較高級的JavaScript表格高亮類的應用，代碼中的Js可以摘出來單獨作為一個表格高亮的修飾類，使用很方便，可以控制表格某行、某列甚至是行列同時高亮顯示，運行一下可以看效果。

<!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" mrc="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;
		}
		
		/* Used with crosshairs.js */
		.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 = "";
		}
	}
}

</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>

所屬頻道：層和布局特效/更新時間：2012-12-21

[收藏][報錯][返回列表]

相關層和布局特效：

比較高級的JavaScript表格高亮類的應用_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些