jquery(操作元素样式)隔行换色

最新推荐文章于 2021-05-31 23:15:02 发布

原创最新推荐文章于 2021-05-31 23:15:02 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #隔行换色 #操作元素样式

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

博客介绍了使用jQuery实现隔行换色样式的方法，包含导入插件、页面样式代码以及实现隔行换色的样式代码，聚焦于利用jQuery操作元素样式达成特定视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面附上部分代码:

1. 首先导入插件:

        <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
        <script type="text/javascript" src="boostrap/js/bootstrap.min.js" ></script>
        <link rel="stylesheet" href="boostrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="jquery-confirm/jquery-confirm.js" ></script>
        <link rel="stylesheet" href="jquery-confirm/jquery-confirm.css" />

2. 页面样式代码:

        <table border="1px" align="center" width="60%" style="border-collapse: collapse;">
            <tr class="tds" >
                <th style="text-align: center;">分类ID</th>
                <th style="text-align: center;">分类名称</th>
                <th style="text-align: center;">分类描述</th>
            </tr>
            <tr align="center" class="tds" >
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
            </tr>
            <tr align="center" class="tds">
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
            </tr>
            <tr align="center" class="tds">
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
            </tr>
            <tr align="center" class="tds">
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
            </tr>
        </table>

3. 实现隔行换色样式代码

        $(function(){
            $("tr:gt(0),even").css("background-color","#E4B9B9");
            $("tr:odd").css("background-color","#F4D03F");
        });