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

表格高亮


* {
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;
}



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