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>