如何实现这种效果

表格指定行鼠标经过时高亮。
比如一个表格有12行，当鼠标经过1-4，5-8，9-12 时高亮。
thanks!

解决方案 »

  1.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="red";
            var cur;
            var nowcol=-1;
            var nowrow=-1;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="1 "+colno
                    col2.id = "2 "+colno;
                    col3.id = "3 "+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    col1.onmouseover=alertMe;
                    col2.onmouseover=alertMe;
                    col3.onmouseover=alertMe ;
                    
                }
            }
            function alertMe(){
                if(cur == this) return false;
                if(cur!=null) cur.style.backgroundColor = THCOLOR;
                this.style.backgroundColor = NEW_COLOR;
                cur = this;
                var id=this.id.split(" ");
                if(nowcol!=-1&&nowrow!=-1){
                    document.getElementById(nowcol+" "+nowrow).style.backgroundColor=THCOLOR;
                }
                nowcol=parseInt(id[0]);
                nowrow=parseInt(id[1]);
            }
            function showMe(){
                if(event.keyCode==38){                           
                    if(nowrow>0){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==40){
                    if(nowrow<14){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==37){
                    if(nowcol>1){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    };
                }
                if(event.keyCode==39){
                    if(nowcol<3){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
               
            }
            window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    </body>
    </html>
      

  2.   


    <script type="text/javascript"> 
    var cur, tb, a;
    function doit(n){
      //alert(n);
      if(cur==n) return;
      if(cur!=null){
        var k = Math.floor(cur / 4);
        for(var i=0;i<4;i++) a[k*4+i].style.backgroundColor="#FFF";
      }
      var k = Math.floor(n / 4);
      for(var i=0;i<4;i++) a[k*4+i].style.backgroundColor="#CCC";
      cur = n;
    }
    window.onload=function(){
    tb = document.getElementById("tb");
    a = tb.getElementsByTagName("tr");
    for(var i=0;i<a.length;i++){
       a[i].onmouseover = (function(n){return function(){doit(n);}})(i);
    }
    }
    </script>
    <table id="tb">
    <tr><td> 1 </td></tr>
    <tr><td> 2 </td></tr>
    <tr><td> 3 </td></tr>
    <tr><td> 4 </td></tr>
    <tr><td> 5 </td></tr>
    <tr><td> 6 </td></tr>
    <tr><td> 7 </td></tr>
    <tr><td> 8 </td></tr>
    <tr><td> 9 </td></tr>
    <tr><td> 10 </td></tr>
    <tr><td> 11 </td></tr>
    <tr><td> 12 </td></tr>
    </table>
      

  3.   

    看错要求了,这个才对<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="red";
            var cur;
            var nowcol=-1;
            var nowrow=-1;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<12; colno++){
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    newRow.onmouseover=alertMe;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="1 "+colno
                    col2.id = "2 "+colno;
                    col3.id = "3 "+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    /* col1.onmouseover=alertMe;
                    col2.onmouseover=alertMe;
                    col3.onmouseover=alertMe ;*/               
                }
            }
            function alertMe(){
                var rowid=this.id.split("r")[1];
                if(rowid<4){
                    for(var i=0;i<12;i++){
                       if(i<4) document.getElementById("r"+i).style.backgroundColor = "red";
                       else document.getElementById("r"+i).style.backgroundColor = THCOLOR;
                    }            }else if(rowid<8){
                    for(var i=0;i<12;i++){
                       if(i>=4&&i<8) document.getElementById("r"+i).style.backgroundColor = "green";
                       else document.getElementById("r"+i).style.backgroundColor = THCOLOR;
                    }
                }else if(rowid<12){
                    for(var i=0;i<12;i++){
                       if(i>=8&&i<12) document.getElementById("r"+i).style.backgroundColor = "yellow";
                       else document.getElementById("r"+i).style.backgroundColor = THCOLOR;
                    }
                }
            }
            
            window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    </body>
    </html>