jquery 为 Table 添加样式

来源：互联网发布：观战数据不可用编辑：程序博客网时间：2024/06/06 03:45
<html><head>    <meta charset="utf-8">    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>    <style type="text/css">        th {            background-color: 06f;            color: #fff;            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><script type="text/javascript">    $(document).ready(function (){        $(".stripe tr").mouseover(function() {            $(this).addClass("over");        }).mouseout(function(){                    $(this).removeClass("over");                });        $(".stripe tr:even").addClass("alt");    });</script><table class="stripe" 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>Jack</td>    <td>23</td>    <td>123456</td>    <td>jack.qq.com</td></tr><tr>    <td>Jack</td>    <td>23</td>    <td>123456</td>    <td>jack.qq.com</td></tr><tr>    <td>Jack</td>    <td>23</td>    <td>123456</td>    <td>jack.qq.com</td></tr><tr>    <td>Jack</td>    <td>23</td>    <td>123456</td>    <td>jack.qq.com</td></tr><tr>    <td>Jack</td>    <td>23</td>    <td>123456</td>    <td>jack.qq.com</td></tr></tbody></table></body></html>
0 0