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

更新时间：2009年11月04日 14:42:58 作者：

比较高级的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" 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>&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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

飞鱼(shqlsl) javascript作品集
飞鱼(shqlsl) javascript作品集...
2006-12-12
另类弹出窗口,跳过所有拦截工具
另类弹出窗口,跳过所有拦截工具...
2007-02-02
全选并改变TR颜色的javascript实现代码
网页特效全选并改变TR颜色
2010-03-03
CSS 布局一个漂亮的滑块
这个是用CSS美化出来的一个漂亮滑块，注意它是一个静态的，没有加入JS,因此不能适时拖动，本示例重点是想表述CSS布局复杂图形的一种方法.
2009-10-10
JavaScript 复制功能代码兼容多浏览器
使用JavaScript直接复制指定的内容，经过Opera、Safari、google、Firefox及IE等多个种类浏览器测试，均功能正常.
2009-10-10
点击按钮后文本框变为Select下拉列表框
在招聘类的网站会见到不少类似效果，文本框中最开始默认的是文字，如果点击更改这类的按钮文本框就变成了一个可以选择的Select下拉列表框，挺有创意，以下是代码，复制即可用啦。
2009-09-09
用javascript实现“闪动”标题栏
用javascript实现“闪动”标题栏...
2007-03-03
短信提示使用特效
短信提示使用特效...
2007-01-01
禁止刷新，回退的JS
禁止刷新，回退的JS...
2006-11-11
JavaScript 自动在表格前面增加序号
JavaScript 自动为表格增加序号，也就是不手动添加序号，让JS自动计算出行数，然后为表格的每行自动加一个序号，行号列的数字随TR 的增加自动增加1，我觉得还挺实用吧。
2009-09-09