html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

jQuery实现隔行背景色变色_jquery_

[ ] 已经帮助:人解决问题

隔行变色有很多中方法来实现,之前我都是直接将判断代码写在程序中,今天我们来使用jQuery实现,代码奉上~QxFHTML5中文学习网 - HTML5先行者学习网

jQuery代码:QxFHTML5中文学习网 - HTML5先行者学习网
QxFHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
QxFHTML5中文学习网 - HTML5先行者学习网
       $(function(){ QxFHTML5中文学习网 - HTML5先行者学习网
            var item = $("tr"); QxFHTML5中文学习网 - HTML5先行者学习网
            for(var i=0;i<item.length;i++){ QxFHTML5中文学习网 - HTML5先行者学习网
                if(i%2==0){ QxFHTML5中文学习网 - HTML5先行者学习网
                    item[i].style.backgroundColor="#888"; QxFHTML5中文学习网 - HTML5先行者学习网
                } QxFHTML5中文学习网 - HTML5先行者学习网
            } QxFHTML5中文学习网 - HTML5先行者学习网
            //$("#tb tbody tr:even").css("backgroundColor","#888"); QxFHTML5中文学习网 - HTML5先行者学习网
  QxFHTML5中文学习网 - HTML5先行者学习网
        });QxFHTML5中文学习网 - HTML5先行者学习网
QxFHTML5中文学习网 - HTML5先行者学习网

HTML代码:QxFHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
QxFHTML5中文学习网 - HTML5先行者学习网
    <table id='tb'> QxFHTML5中文学习网 - HTML5先行者学习网
        <tbody> QxFHTML5中文学习网 - HTML5先行者学习网
            <tr><td>第一行</td><td>第一行</td></tr> QxFHTML5中文学习网 - HTML5先行者学习网
            <tr><td>第二行</td><td>第2行</td></tr> QxFHTML5中文学习网 - HTML5先行者学习网
            <tr><td>第三行</td><td>第3行</td></tr> QxFHTML5中文学习网 - HTML5先行者学习网
            <tr><td>第4行</td><td>第4行</td></tr> QxFHTML5中文学习网 - HTML5先行者学习网
            <tr><td>第5行</td><td>第5行</td></tr> QxFHTML5中文学习网 - HTML5先行者学习网
            <tr><td>第6行</td><td>第6行</td></tr> QxFHTML5中文学习网 - HTML5先行者学习网
        </tbody> QxFHTML5中文学习网 - HTML5先行者学习网
    </table> QxFHTML5中文学习网 - HTML5先行者学习网
QxFHTML5中文学习网 - HTML5先行者学习网

是不是很好玩,小伙伴们其实可以用jQuery实现很多好玩的东西的,大家自由发挥吧QxFHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助