鼠标位于上面高亮显示表格的行

来源：百度文库编辑：神马文学网时间：2024/04/29 04:50:18

Put this into your section：

    body{
        font-size:0.8em;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
        margin:0px;
        padding:0px;
    }
    img{
        border:0px;
    }
    thead td{
        font-weight:bold;
        color:#000;
        background-color:#E2EBED;
    }
    td{
        padding:2px;
    }
    table{
        border:1px solid #000;
        border-collapse: collapse;
    }
    h1{
        font-size:1.3em;
        margin-bottom:0px;
    }
    table,h1,p,#ads{
        margin-left:10px;
    }
    #ads{
        margin-top:20px;
    }

    /* These classes are used by the script as rollover effect for table 1 and 2 */

    .tableRollOverEffect1{
        background-color:#317082;
        color:#FFF;
    }

    .tableRollOverEffect2{
        background-color:#000;
        color:#FFF;
    }

    .tableRowClickEffect1{
        background-color:#F00;
        color:#FFF;
    }
    .tableRowClickEffect2{
        background-color:#00F;
        color:#FFF;
    }



    /************************************************************************************************************
    (C) www.dhtmlgoodies.com, November 2005

    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

    Terms of use:
    You are free to use this script as long as the copyright message is kept intact. However, you may not
    redistribute, sell or repost it without our permission.

    Thank you!

    www.dhtmlgoodies.com
    Alf Magne Kalleland

    ************************************************************************************************************/
    var arrayOfRolloverClasses = new Array();
    var arrayOfClickClasses = new Array();
    var activeRow = false;
    var activeRowClickArray = new Array();

    function highlightTableRow()
    {
        var tableObj = this.parentNode;
        if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

        if(this!=activeRow){
            this.setAttribute('origCl',this.className);
            this.origCl = this.className;
        }
        this.className = arrayOfRolloverClasses[tableObj.id];

        activeRow = this;

    }

    function clickOnTableRow()
    {
        var tableObj = this.parentNode;
        if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

        if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
            activeRowClickArray[tableObj.id].className='';
        }
        this.className = arrayOfClickClasses[tableObj.id];

        activeRowClickArray[tableObj.id] = this;

    }

    function resetRowStyle()
    {
        var tableObj = this.parentNode;
        if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

        if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
            this.className = arrayOfClickClasses[tableObj.id];
            return;
        }

        var origCl = this.getAttribute('origCl');
        if(!origCl)origCl = this.origCl;
        this.className=origCl;

    }

    function addTableRolloverEffect(tableId,whichClass,whichClassOnClick)
    {
        arrayOfRolloverClasses[tableId] = whichClass;
        arrayOfClickClasses[tableId] = whichClassOnClick;

        var tableObj = document.getElementById(tableId);
        var tBody = tableObj.getElementsByTagName('TBODY');
        if(tBody){
            var rows = tBody[0].getElementsByTagName('TR');
        }else{
            var rows = tableObj.getElementsByTagName('TR');
        }
        for(var no=0;no            rows[no].onmouseover = highlightTableRow;
            rows[no].onmouseout = resetRowStyle;

            if(whichClassOnClick){
                rows[no].onclick = clickOnTableRow;
            }
        }

    }

Put this into your section：

Table example 1

            Name
            Age
            Position
            Income
            Gender




            John
            37
            Managing director
            90.000
            Male


            Susan
            34
            Partner
            90.000
            Female


            David
            29
            Head of production
            70.000
            Male


            Laura
            29
            Head of marketing
            70.000
            Female


            Kate
            18
            Marketing
            50.000
            Female


            Mona
            21
            Marketing
            53.000
            Female


            Mike
            21
            Marketing
            53.000
            Male


            Mark
            25
            Production
            52.000
            Male

Table example 2

            Name
            Age
            Position
            Income
            Gender




            Peter
            33
            Production
            55.000
            Male


            Jennifer
            24
            Production
            49.000
            Female


            David
            25
            Photography
            51.000
            Male


            Anna
            42
            Head of photography
            56.000
            Female


            Rita
            30
            Photography
            54.000
            Female


            Magnus
            25
            Freelancer
            65.000
            Male


            Johnny
            29
            Freelancer
            63.000
            Male



addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');

效果：http://www.dhtmlgoodies.com/scripts/highlight-table-row/highlight-table-row.html

本文转自：http://www.dhtmlgoodies.com/index.html

鼠标位于上面高亮显示表格的行 div层跨越iframe帧显示在上面的解决方法附代码如何使用 ASP 构建在客户端显示的 XML 表格 Flash实例教程:鼠标响应显示图片的动画效果 CAD鼠标中键不能移动(显示手掌)的解决方案标语上面的箭头人民币上面的人 mschart控件如何使鼠标移动到数据标记上时显示相应的内容12 mschart控件如何使鼠标移动到数据标记上时显示相应的内容4 mschart控件如何使鼠标移动到数据标记上时显示相应的内容asdf Excel表格让特定单元格醒目显示鼠标能显示，但无法移动科学家称地球位于宇宙间相连的时空管道科学家称地球位于宇宙间相连的时空管道我们的宇宙可能位于虫洞内部以色列军队开始拆除位于耶路撒冷地区的隔离墙巴基斯坦灾民乘船准备返回位于瑙谢拉的家园亚特兰提斯(大西国)位于大西洋的亚速尔群岛和加那利群岛位于恩施的七个世界第一，一个亚洲第一！！！！ excel vba 高亮显示当前行代码1 血糖高在饮食上面要注意那些方面请问血糖高在饮食上面要注意那些方面请问血糖高在饮食上面,要注意那些方面揭掉盖在校园集体舞上面的遮羞布