jquery学习笔记(二)

制作双色Table,鼠标经过时颜色发生改变的jquery实现方法
...

<!--table样式-->

<style type="text/css">

        th{

               background:#e43d5f;

               color:blue;

        }

        td{

                font-size:13pt;

                text-align:center;

         }

         tr.over td{

                background:#8f432d; //鼠标经过时颜色发生变化

         }

         tr.alternate td{

                background:#9f8858; //表格行间隔显示颜色

         }

</style>

<!--引用jquery-->

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript">

        $(document).ready(function()

         {

              $(".strip tr").mouseover(function()

                   {$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");  //鼠标经过和鼠标移出时

                   }

                 );

              $(".strip tr:even").addClass("alternate"); //偶数行颜色发生改变

                         

         });

</script>

...

<table class="strip">

     <thead>

           <tr>

                  <th>姓名</th>

                  <th>年龄</th>

           </tr>

     </thead>

            <tr>

                   <td>张三</td>

                   <td>20</td>

            </tr>

            <tr>

                   <td>李四</td>

                   <td>21</td>

            </tr>

             <tr>

                   <td>王五</td>

                   <td>22</td>

            </tr>

            <tr>

                   <td>余六</td>

                   <td>23</td>

            </tr>

     <tbody>

     </tbody>

</table>