<! 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" > <pead> <title> table highlighting </title> <meta http-equiv= "Con Tent-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].cell S[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);} The function addhilight (cell) {applyhilight (Cell.parentNode.parentNode.parentNode)}}} Cell.parentNode.rowIndex, Cell.cellindex, 1); function Removehilight (cell) {applyhilight (Cell.parentNode.parentNode.parentNode, Cell.pare Ntnode.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 the 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 = "" + Hilightclas S 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 + = "" + CLA Ssarray[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.R Ows[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) {Oldactivecellclass es = 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[rowin Dex].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 &L T 0) Continue; if (!obj.rows[i]) continue; for (var j = (Colindex-surroundradius); J <= (Colindex + Surroundradius); j + +) {if (J & Lt 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> </pead> <body> <table id= "crosstable" > &L T;tr> <th> </th> <th> No. </th> <th> name </th> ; <th> Address </th> <th> Tel </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&G T <td>a2</td> <td>b2</td> <td>c2</td> <td>d 2</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</t d> <td>d4</td> </tr> <tr> <td class= "b Old">5</td> <td>a5</td> <td>b5</td> <td>c5</ td> <td>d5</td> </tr> </table> <script type= "Text/ja Vascript "> Initcrosshairstable (" crosstable ", 1, 0, 0, 1);//control </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
