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; }/* 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需刷新才能执行]