Jquery快速制作双色表格

最新推荐文章于 2017-03-31 19:22:28 发布

Kevin Xi

最新推荐文章于 2017-03-31 19:22:28 发布

阅读量747

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/Sydica/article/details/8724540

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏


<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".strip tr").mousemove(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over")})
    $(".strip tr:even").addClass("alt");
});

</script>
<style type="text/css">
th{background:#0066FF;color:#FFFFFF;line-height:20px;height:30px;}
td{padding:6px 11px;border-bottom:1px solid #95bce2;vertical-align:top; text-align:center}
td*{padding:6px 11px;}
tr.alt td{background:#ecf6fc}
tr.over td{background:#bcd4ec}
</style>
</head>
<body>
<table class="strip" width="50%" border="0"  cellpadding="0"  cellspacing="0">
<thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>QQ</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
<tr>
    <td>嘻嘻</td>
    <td>25</td>
    <td>34234</td>
    <td>test@sina.com</td>
</tr>
<tr>
    <td>嘻嘻</td>
    <td>25</td>
    <td>34234</td>
    <td>test@sina.com</td>
</tr>
<tr>
    <td>嘻嘻</td>
    <td>25</td>
    <td>34234</td>
    <td>test@sina.com</td>
</tr><tr>
    <td>嘻嘻</td>
    <td>25</td>
    <td>34234</td>
    <td>test@sina.com</td>
</tr><tr>
    <td>嘻嘻</td>
    <td>25</td>
    <td>34234</td>
    <td>test@sina.com</td>
</tr>
</tbody>

</table>
</body>
</html>

Kevin Xi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery快速制作双色表格

$(document).ready(function(){ $(".strip tr").mousemove(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over")}) $(".strip tr:even").addClass("alt");});th{b
复制链接

扫一扫