学步园

       我们希望实现当鼠标移动到表格的某行时，改变它的背景色，在这里我写了一点简单的js实现：
原理很简单，调用onmouseover和onmouseout两个事件，当鼠标移到当表格上时，获取表格所在的行对象，再改变行对象的背景色，
当鼠标离开时调用onmouseout恢复原来的背景。
      下面是改变颜色的js代码：
      

    <script language="javascript" type="text/javascript">
// <!CDATA[
        /*********** 主流浏览器类型判断 ***********/
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        if (window.ActiveXObject)
            Sys.ie = ua.match(/msie ([\d.]+)/)[1]
        else if (document.getBoxObjectFor)
            Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
        else if (window.MessageEvent && !document.getBoxObjectFor)
            Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
        else if (window.opera)
            Sys.opera = ua.match(/opera.([\d.]+)/)[1]
        else if (window.openDatabase)
            Sys.safari = ua.match(/version\/([\d.]+)/)[1];
        /************** End *****************/

        var obj;
        function setSelectedRowColor(oEvent)
        {
            if (Sys.ie)
            {
                obj = oEvent.srcElement.parentElement;
                if (oEvent.srcElement.tagName == "TH")
                {
                    return;
                }               
            }
            else if (Sys.firefox)
            {
                obj = oEvent.target.parentNode;
                if (oEvent.target.tagName == "TH")
                {
                    return;
                }
            }
            if (obj.tagName == "TR")
            {
                obj.style.backgroundColor = "Gray";
            }
        }

        function backRowColor(oEvent)
        {
            if (Sys.ie)
            {
                obj = oEvent.srcElement.parentElement;
                if (oEvent.srcElement.tagName == "TH")
                {
                    return;
                }
            }
            else if (Sys.firefox)
            {
                obj = oEvent.target.parentNode;
                if (oEvent.target.tagName == "TH")
                {
                    return;
                }
            }
            if (obj.tagName == "TR")
            {
                obj.style.backgroundColor = "white";
            }
        }
// ]]>
    </script>

      页面内容，如下：
      

  <table id="data" class="style1" onmouseover="setSelectedRowColor(event);" 
                        onmouseout="backRowColor(event);" 
                        cellspacing="0">
           <tr style="background:green;">
               <th>
                   a</th>
               <th>
                   b</th>
               <th>
                   c</th>
           </tr>
           <tr>
               <td>
                   d</td>
               <td>
                   d</td>
               <td>
                   h</td>
           </tr>
           <tr>
               <td>
                   f</td>
               <td>
                   e</td>
               <td>
                   g</td>
           </tr>
       </table>

在这里如果用jQuery做的话就更简单了，

a	b	c
d	d	h
f	e	g
f	e	g

隔行变色处理：

$(function() { $("#data tr:even").css("background-color","#E5F3F6"); } )

***最终表格隔行变色和鼠标移到变色，通过与css定义联系起来，将样式写在模式表中

function changeInterleaveColor(id)
        {
            $("#" + id + " tr:even").attr("class", "normalEvenTr"); //奇数行
            $("#" + id + " tr:first").attr("class", "t_h"); //标题
            $("#" + id + " tr:not(#" + id + " tr:first)").hover(
            function()
            {
                this.className = "hoverTr";
            }
            , function()
            {
                if (this.rowIndex % 2 == 0)
                {
                    this.className = "normalEvenTr";
                }
                else
                {
                    this.className = "normalOddTr";
                }
            });
        }