您的位置:首页 - 教程 - jQuery - 正文
jquery 表格(鼠标悬停改变改变行背景+隔行换色)
http://hovertree.com/code/jquery/dfkh88e4.htm

NUM1:鼠标悬停改变改变行背景

NUM2:隔行换色

HTML:

<table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>小文</td>
                    <td>20</td>
                    <td></td>
                </tr>
                <tr>
                    <td>小李</td>
                    <td>21</td>
                    <td></td>
                </tr>
                <tr>
                   <td>小慧</td>
                    <td>21</td>
                    <td></td>
                </tr>
                <tr>
                    <td>琪琪</td>
                    <td>19</td>
                    <td></td>
                </tr>
                <tr>
                    <td>小勇</td>
                    <td>22</td>
                    <td></td>
                </tr>
                <tr>
                    <td>馨儿</td>
                    <td>23</td>
                    <td></td>
                </tr>
                <tr>
                    <td>小鹏</td>
                    <td>21</td>
                    <td></td>
                </tr>
                <tr>
                    <td>鸭梨山大</td>
                    <td>30</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

CSS:

.hover{
                background-color: #00f;
                color: #fff;
            }

 

NUM1's jquery code:

$('tbody tr').hover(function(){
                    $(this).find('td').addClass('hover');
                }, function(){
                    $(this).find('td').removeClass('hover');
                }); 

 

NUM2's Jquery code:

$('tbody tr:odd').addClass('hover');

评论: