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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 表格高亮类的应用[高级]

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 143 ::

收藏到网摘: n/a

JavaScript window.setTimeout() 的详细用法实用的JS表单验证提示效果

比较高级的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> </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 全选提示:你可先修改部分代码,再按运行]

JavaScript window.setTimeout() 的详细用法实用的JS表单验证提示效果

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

评论 (0) All