Jquery实现隔行变色问题

最新推荐文章于 2023-10-09 16:46:13 发布

耿宇丹

最新推荐文章于 2023-10-09 16:46:13 发布

阅读量978

点赞数

分类专栏： Jquery内容

本文链接：https://blog.csdn.net/gengyudan/article/details/8816024

版权

Jquery内容专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<title></title>
    <style type="text/css">
    ul li
    {
        list-style-type: none;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Button1').click(function () {
                //                $('li:eq(0)').css('background-color', 'blue');//第一行的背景被染成蓝色
                $('li:first-child').css('background-color', 'blue');//每一个ul下的li里面的第一行被染成蓝色
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>脾气不能不发，宁可丢坏书本，不能憋坏身体！</li>
        <li>咱们还是小孩呢！不必这么装模作样吧！</li>
        <li>我以为夏天还早着呢！怪不得压岁钱都花光了。</li>
        <li>如果和女生比的话，男生中傻瓜好象比较多。</li>
    </ul>
    <ul>
        <li>小丸子：我去年写的愿望，三个月内就实现了。</li>
        <li>说"芝麻开门"也不行的！这个童话不知会让多少小孩子上当！</li>
        <li>太贵了，只有和妈妈一起，才可以吃。</li>
        <li>小玉：别这样抱它（流浪狗），传染出感情就糟了！</li>
    </ul>
    <ul>
        <li>妈妈澄丽：孩子他爸，演戏也不用这样吧？</li>
        <li>在有档次的餐厅吃饭，却尽说些没档次的话，如果盘子里的鱼听到，没死也得给气死了。</li>
        <li>小丸子：我想拆掉这个闹钟。当年爱迪生就经常这样呢。</li>
        <li>我纯真的心由于牛排饭而欢呼不已。</li>
    </ul>
    <ul>
        <li>如果光吃菜营养就好的话，还吃肉干什么？</li>
    </ul>
    <input id="Button1" type="button" value="点一点哦" />
</body>

方法2：

function showinfo() {
            var table = document.getElementById("mytable");
            for (var i = 0; i < table.rows.length; i++) {
                if (i % 2 != 0) {

                    table.rows[i].style.background = 'blue';
                }
            }
        }
      </script>
</head>
<body οnlοad="showinfo()">
<table id="mytable">
        <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>

耿宇丹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现隔行变色问题

ul li { list-style-type: none; } $(function () { $('#Button1').click(function () { // $('li:eq(0)').css('
复制链接

扫一扫