js table鼠标移动高亮显示

<script type="text/javascript">
    //鼠标移动高亮显示
    function cells_color() {
        var oColor, td = event.srcElement
        if (td.tagName != "TD")
            return;
        if (event.type == "mouseover")
            oColor = "#dedede"
        else oColor = "#ffffff"
        tr = td.parentElement
        tb = tr.parentElement
        for (var i = 0; i < tr.cells.length; i++)              //行高亮
            tr.cells[i].bgColor = oColor
        //for (var i = 0; i < tb.rows.length; i++)           //列高亮
        //    tb.rows[i].cells[td.cellIndex].bgColor = oColor
    }
</script>
<table border="0" onmouseover="cells_color()" onmouseout="cells_color()">
    <tr>
        <td>demo</td>
        <td>demo</td>
        <td>demo</td>
    </tr>
    <tr>
        <td>demo</td>
        <td>demo</td>
        <td>demo</td>
    </tr>
    <tr>
        <td>demo</td>
        <td>demo</td>
        <td>demo</td>
    </tr>

</table>

第二种

    <script type="text/javascript">
        $(document).ready(function () {
            //方式一
            //$("#tblContent tr:nth-child(even)").css({ "background-color": "#E4F5FF" });

            //方式二
            $("#tblContent tr:even").css("background-color", "#fff");   //奇数行
            $("#tblContent tr:odd").css("background-color", "#E4F5FF");//偶数行
        });

        function cells_color() {
            $("#tblContent tr").mouseover(function () {
                $(this).css({ "background-color": "#87CEEB" });
            }).mouseout(function (event) {
                var $index = $(this).index();
                if ($index % 2 == 0) {
                    $(this).css({ "background-color": "#fff" });
                } else {
                    $(this).css({ "background-color": "#E4F5FF" });
                }
            });
        }
    </script>

    <table id="tblContent" onmouseover="cells_color()" onmouseout="cells_color()" border="1" cellpadding="1" cellspacing="0" onmouseover="cells_color()" onmouseout="cells_color()">
        <tbody id="ttr">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr><tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr><tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr><tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr><tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>

单击表格变换颜色

<script>
function bgChange(obj){
obj.bgColor=obj.bgColor==""?"#0099ff":"";
}
</script>
<table width="80%" border="1">
<tr onclick="bgChange(this)"><td>a</td><td>a</td></tr>
<tr onclick="bgChange(this)"><td>a</td><td>a</td></tr>
<tr onclick="bgChange(this)"><td>a</td><td>a</td></tr>
</table>