ylbtech-jQuery:jQuery学习

jQuery语法实例

表格变色
效果截图
 
jQuery:1.5.4.1,表格变色 HTML代码返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .even{ background-color:Gray;} /*奇数行样式*/
        .odd{ background-color:Yellow;} /*偶数行样式*/
    </style>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("tr:even").addClass("even");  /*给奇数行添加样式*/
            $("tr:odd").addClass("odd");  /*偶数行添加样式*/
        });
    </script>
</head>
<body>
<h3>表格变色</h3>
    <table style="width: 300px;">
        <tr>
            <th>
                
                name</th>
            <th>
                sex</th>
            <th>
                age</th>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        <tr>
            <td>
                rain 
            </td>
            <td>
                male 
            </td>
            <td>
                
                23</td>
        </tr>
        </table>
    <div>注意:$("tr:odd")和$("tr:even")选择器中的索引是从0开始的,因此第一行是奇数</div>
</body>
</html>
jQuery:1.5.4.1.B,效果截图返回顶部

 jQuery:1.5.4.1,表格变色(第一行是奇数)

jQuery:1.5.4.1,表格变色(第一行是奇数) 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章:

  • 2022-01-20
  • 2021-08-07
  • 2021-10-27
  • 2021-06-11
  • 2022-12-23
  • 2022-12-23
  • 2021-10-14
  • 2021-05-12
猜你喜欢
  • 2022-02-06
  • 2022-02-27
  • 2021-11-24
  • 2022-01-12
  • 2021-10-21
  • 2022-12-23
  • 2021-12-13
相关资源
相似解决方案