首页 > 网络编程 > JavaScript > 网页特效 > 典型特效 > JavaScript 表格高亮类

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

</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需刷新才能执行]

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

您可能感兴趣的文章: