表格隔行换色效果

html

<title>无标题文档title>
<link rel="stylesheet" href="Untitled-3.css" />
<script src="jQuery-2.1.0/jquery-2.1.0.js">script>

<style type="text/css">
    .one{ background:#CCABB0}
    .tow{ background:#D877A2;
style>

<script type="text/javascript">
    $(function(){

        $("tr:even").addClass("one");
        $("tr:odd").addClass("tow");

    });
script>
head>

<body>
<table border="1px solid red" cellspacing="0px" cellpadding="10">
    <tr class="ul">
        <td>一月td>
        <td>二月td>
        <td>三月td>
    tr>
    <tr class="ul">
        <td>四月td>
        <td>五月td>
        <td>六月td>
    tr>
    <tr class="ul">
        <td>七月td>
        <td>八月td>
        <td>九月td>
    tr>
    <tr class="ul">
        <td>十月td>
        <td>十一月td>
        <td>十二月td>
    tr>
table>
body>

Untitled-3.css

.ul td:hover{
background:red;

}

你可能感兴趣的:(表格隔行换色效果)