小知识点:odd的过滤选择器大的使用

html代码:

 <table>
<tr>
<td>用户名</td>
<td>年龄</td>
<td>编号</td>
</tr>
<tr>
<td>佩奇</td>
<td>5</td>
<td>344</td>
</tr>
<tr>
<td>尼克</td>
<td>8</td>
<td>233</td>
</tr>
<tr>
<td>莫妮卡</td>
<td>16</td>
<td>277</td>
</tr>
<tr>
<td>雷奥</td>
<td>14</td>
<td>455</td>
</tr>
<tr>
<td>恒猪猪</td>
<td>3</td>
<td>588</td>
</tr>
</table>

css代码:

      body,div,p,table,tr,td{
margin:;
padding:;
}
table{
border-collapse: collapse;
border-spacing:;
border: 1px solid #ccc;
}
tr,td{
border: 1px solid #ccc;
}
td{
width: 100px;
/* background-color: ;; */
}

jquery代码

        var tdstrs=$('tr:odd')
tdstrs.css('backgroundColor','#eee')

效果

总结:该实现用的是jquery中的过滤选择器 :odd【获取索引号为奇数的元素】

使用方法:$("其他选择器:odd")

获取索引号为偶数的元素   :event 用法同上

注:老马前端视频学习练习

jquery简单实现表格隔行变色的更多相关文章

  1. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  2. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  3. Jquery 组 tbale表格隔行变色

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  4. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  5. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  6. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

  7. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

随机推荐

  1. JAVA静态数据的初始化;

    ①:Java首次会自动对变量进行初始化,其顺序优于构造器: ②:如果一个域是静态的的基本类型域,且也没有对它进行初始化,那么它就会获得基本类型的标准初值,如果它是一个对象引用,那么他的默认初始化值为n ...

  2. 使用 QQ 邮箱发送邮件报错:java.net.SocketTimeoutException: Read timed out. Failed messages: javax.mail.MessagingException: Exception reading response

    使用 QQ 邮箱发送邮件报错:java.net.SocketTimeoutException: Read timed out. Failed messages: javax.mail.Messagin ...

  3. SQL中group by使用

    多条重复记录,有一个字段可以进行区分,从重复的记录中取出其中一条,可利用group by字段 举例如下: 查询所有 查询地区中的最高分

  4. HTTP请求的python实现(urlopen、headers处理、 Cookie处理、设置Timeout超时、 重定向、Proxy的设置)

    python实现HTTP请求的三中方式:urllib2/urllib.httplib/urllib 以及Requests urllib2/urllib实现 urllib2和urllib是python两 ...

  5. Centos7下yum安装kubernetes

    一.前言    Kubernetes 是Google开源的容器集群管理系统,基于Docker构建一个容器的调度服务,提供资源调度.均衡容灾.服务注册.动态扩缩容等功能套件,目前centos yum源上 ...

  6. 小程序请求豆瓣API报403解决方法

    微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种 ...

  7. 学习ansible笔记1

    ansible的特点: -- 模块化设计 -- 仅需要ssh和Python即可以使用 -- 无客户端 -- 功能强大,模块丰富 -- 上手容易门槛低 -- 基于python开发,做二次开发更容易 -- ...

  8. classmethod自己定制

    # # 利用描述符原理定义一个@classmethod # class ClassMethod: # def __init__(self,func): # self.func = func # def ...

  9. python selenium 实战涉及很多知识点

    1.iframe的切入和切出 #切入 driver.switch_to.frame(driver.find_element_by_id('iFrame_1')) # 切换出来 driver.switc ...

  10. 【CUDA开发】__syncthreads的理解

    __syncthreads()是cuda的内建函数,用于块内线程通信. __syncthreads() is you garden variety thread barrier. Any thread ...