JavaScript 表格高亮类的应用[高级]

作者：bea

<!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;
}

/* 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 = "";
}
}
}

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

[Ctrl+A 全选注:
如需引入外部Js需刷新才能执行]

有用 | 无用

JavaScript 表格高亮类的应用[高级]

猜你喜欢

您可能感兴趣的文章: