zoukankan      html  css  js  c++  java
  • jQuery隔行变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            .imgclass
            {
                200px;
                height: 200px;
            }
            .imgclass1
            {
                220px;
                height: 220px;
            }
        </style>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
          

            $(function () {

             $(function () {

                $('tr:odd').css('background-color', 'red');
                $('tr:even:not(#tr1)').css('background-color', 'blue');

            })

     </script>

    </head>
    <body>

     <table>
            <tr id="tr1">
                <th>
                    出游时间
                </th>
                <th>
                    出游地
                </th>
                <th>
                    出游方式
                </th>
                <th>
                    预计花费
                </th>
            </tr>
            <tr>
                <td>
                    元旦
                </td>
                <td>
                    三亚
                </td>
                <td>
                    飞机
                </td>
                <td>
                    2000
                </td>
            </tr>
            <tr>
                <td>
                    春节
                </td>
                <td>
                    泰国
                </td>
                <td>
                    飞机
                </td>
                <td>
                    2500
                </td>
            </tr>
            <tr>
                <td>
                    清明
                </td>
                <td>
                    大唐芙蓉园
                </td>
                <td>
                    火车
                </td>
                <td>
                    1500
                </td>
            </tr>
            <tr>
                <td>
                    五一
                </td>
                <td>
                    颐和园
                </td>
                <td>
                    火车
                </td>
                <td>
                    100
                </td>
            </tr>
            <tr>
                <td>
                    端午
                </td>
                <td>
                    周庄
                </td>
                <td>
                    火车
                </td>
                <td>
                    1000
                </td>
            </tr>
            <tr>
                <td>
                    十一
                </td>
                <td>
                    满城
                </td>
                <td>
                    汽车
                </td>
                <td>
                    30
                </td>
            </tr>
        </table>
    </body>
    </html>

  • 相关阅读:
    编程模式
    第六章类(十九)readonly
    Javascript----实现鼠标背景效果(同时不影响其操作)
    Javascript----input事件实现动态监听textarea内容变化
    javascript----mouseover和mouseenter的区别
    Javascript----实现火箭按钮网页置顶
    Javascript----scroll事件进度条监听
    Javascript----生成省-市下拉表单
    Javascript----增删改查
    javascript-----轮播图插件
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3027039.html
Copyright © 2011-2022 走看看