JavaScript表格高亮类的应用[高级]_典型特效

来源：动视网责编：小采时间：2020-11-27 20:45:16

JavaScript表格高亮类的应用[高级]_典型特效

JavaScript表格高亮类的应用[高级]_典型特效: 表格高亮 * { font-size: 11px; font-family: verdana, arial, sans-serif; } table { border: 1px solid #ccc; margin: 0 auto; } th { background-color: #f7f7f7; } td, th { padding: 1

推荐度：

点击下载本文 文档为doc格式

导读JavaScript表格高亮类的应用[高级]_典型特效: 表格高亮 * { font-size: 11px; font-family: verdana, arial, sans-serif; } table { border: 1px solid #ccc; margin: 0 auto; } th { background-color: #f7f7f7; } td, th { padding: 1

<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> 
 
  
 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 = ""; 
 } 
 } 
}

</ 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> 
 
initCrossHairsTable("crossTable", 1, 0, 0, 1);//控制 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript表格高亮类的应用[高级]_典型特效

推荐度：

点击下载本文 文档为doc格式

标签：表格特效 js

热门焦点

JavaScript表格高亮类的应用[高级]_典型特效

JavaScript表格高亮类的应用[高级]_典型特效

JavaScript表格高亮类的应用[高级]_典型特效

最新推荐

猜你喜欢

热门推荐