JavaScript 表格高亮類的應用[高級]

2019-11-21 01:00:54

字體：大中小

來源：轉載

供稿：網友

<!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需刷新才能執行]

上一篇：實用的JS表單驗證提示效果

下一篇：JavaScript window.setTimeout() 的詳細用法