简单实现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"> <div> <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> </div> </form> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
简单实现jquery隔行变色
本文实例为大家分享了jquery隔行变色展示的具体代码,供大家参考,具体内容如下 效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="js/jquery-2.1.0.js"
-
jQuery隔行变色与普通JS写法的对比
复制代码 代码如下: <style type="text/css"> body { font-size:12px;text-align:center; } #tbStu { width:260px;border:1px solid #666;background-color:#eee; } #tbStu tr { line-height:23px; } #tbStu tr th { background-color:#ccc;color:#fff; } #tbStu .tr
-
jQuery实现的隔行变色功能【案例】
本文实例讲述了jQuery实现的隔行变色功能.分享给大家供大家参考,具体如下: 实现效果如图: html结构代码: <ul id="ul1"> <li>我是第1个li标签</li> <li>我是第2个li标签</li> <li>我是第3个li标签</li> <li>我是第4个li标签</li> <li>我是第5个li标签</li> <li>我是
-
jQuery实现简单隔行变色的方法
本文实例讲述了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"> <h
-
jquery入门—选择器实现隔行变色实例代码
1.JQuery选择器继承了CSS.path语音的部分语法,允许通过标签名.属性名.内容对DOM元素进行快速.准确的选择. 2.JQuery选择器与JavaScript相比,具有代码简单.完善的检测机制的优势. 3.使用JQuery选择器实现隔行变色,示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T
-
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了很多的代码量,而且学习也不是很高.接下来给大家分享两个小的特效,表格隔行变色和Tab标签页,大家来体会一下. 表格隔行变色 效果图: 原生Js实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta c
-
php简单隔行变色功能实现代码 原创
本文简单分析了php简单隔行变色功能实现方法.分享给大家公大家参考.具体如下: $color=""; echo "隔行变色效果:"; echo "<ul>"; for($i=1;$i<=5;$i++){ if($i%2==0){ $color="yellow"; } if($i%2==1){ $color="red"; } echo "<li style=\"ba
-
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
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> <m
-
jQuery实现隔行变色的方法分析(对比原生JS)
本文实例分析了jQuery实现隔行变色的方法.分享给大家供大家参考,具体如下: 原生js: var tab = document.getElementByTagName('table')[0]; var tr = tab.getElementByTagName('tr'); for(var i=0;i<tr.length;i++){ if(i%2==0){ tr[i].style.background="orange"; }else{ tr[i].style.background
-
JS与jQuery实现隔行变色的方法
本文实例讲述了JS与jQuery实现隔行变色的方法.分享给大家供大家参考,具体如下: 传统的JS方法: <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> windo
随机推荐
- JavaScript编写棋盘覆盖代码详解
- hta编写的软件管理工具0.1(IE7.0测试通过)
- SQLite教程(四):内置函数
- 有关DOM元素与事件的3个谜题
- 详解Android中一些SQLite的增删改查操作
- python遍历目录的方法小结
- Python中统计函数运行耗时的方法
- asp Http_Referer,Server_Name和Http_Host
- 多字段模糊搜索的函数
- Python 检查数组元素是否存在类似PHP isset()方法
- 详解JS对象封装的常用方式
- 用java WebSocket做一个聊天室
- RN在Android打包发布App(详解)
- Android中的AppWidget入门教程
- Android中实现iOS中的毛玻璃效果
- 简单了解python单例模式的几种写法
- 微信小程序实现顶部下拉菜单栏
- Windows 2012/IIS8多网站用相同端口部署多张证书(SNI)
- python列表推导式操作解析
- Flutter 中 Dart的Mixin示例详解