• 技术文章 >web前端 >js教程

    jquery简单实现隔行变色方法

    小云云小云云2017-12-23 10:12:33原创1491
    前端开发离不开jquery,jquery和JavaScript一样能实现很多功能,本文主要为大家详细介绍了实现jquery隔行变色效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

    本文实例为大家分享了jquery隔行变色展示的具体代码,供大家参考,具体内容如下

    效果图

    代码


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
    $(function(){
    $("tr:odd").attr("bgColor","#DD1C73");
    $("tr:even").attr("bgColor","#875BE6");
    })
    </script>
    <body>
    <form id="form1" runat="server"> 
      <p> 
      <table width="300px"> 
          <tr><td>11111</td></tr> 
          <tr><td>22222</td></tr> 
          <tr><td>33333</td></tr> 
          <tr><td>44444</td></tr> 
          <tr><td>55555</td></tr> 
          <tr><td>55555</td></tr> 
      </table> 
     
      </p> 
      </form> 
    </body>
    </html>

    一个小功能,大家学会了吗?赶紧动手尝试一下吧。

    相关推荐:

    JS控制表格隔行变色的实现代码展示

    JS实现列表页面隔行变色效果的示例代码分享

    纯JS代码实现隔行变色鼠标移入高亮

    以上就是jquery简单实现隔行变色方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery 变色 隔行
    上一篇:详解jQuery实现动态添加节点与遍历节点功能 下一篇:简单了解vue2 单页面如何设置网页title
    千万级数据并发解决方案

    相关文章推荐

    • JavaScript知识点整理之获取元素和节点• 一文浅析angular中的组件模板• 一文搞懂JavaScript WebAPI• 值得了解的几个实用JavaScript优化小技巧• JavaScript学习理解之JSON(总结分享)
    1/1

    PHP中文网