基础——使用jquery制作隔行换色

CSS

<style type="text/css">
    .over{
        background-color:#F00;
        }
    table{
        background-color:#CCC;
    }
    td{
        border-bottom-width:1px;
        border-bottom-color:#FC6;
        border-bottom-style:dotted;
        width:300px;
    }
</style>

JS

<script type="text/javascript">
    $(document).ready(function(){    //当文档加载完成时执行
         $("#tb_Info tr").mouseover(function(){        //当鼠标移动到表格的tr上时执行函数
             $(this).addClass("over");        //为该tr添加CSS样式over
         }).mouseout(function(){        //当鼠标移除该tr时执行函数
             $(this).removeClass("over");        //将该tr上的css移除
         })
    });
</script>

HTML

<table id="tb_Info">
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>5</td>
    </tr>
</table>

O(∩_∩)O每天进步一点点O(∩_∩)O 该BLOG供个人记录学习笔记，如有错误欢迎指出！