小知识点: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. log4net保留几天内的日志

    想实现保留7天(一周)内的日志,网上一堆下述代码 <appender name="RollingLogFileAppender" type="log4net.App ...

  2. 标准C++常用头文件及描述

    #include <algorithm> //STL 通用算法 #include <bitset> //STL 位集容器 #include <cctype> //字 ...

  3. WCF的CommunicationObjectFaultedException异常问题

    前天刚刚重装了系统,装上了Win7,结果在调试的时候,WCF服务Open报错了! 具体错误信息如下: System.ServiceModel.CommunicationObjectFaultedExc ...

  4. Jmeter测试结果分析(上)

    Jmeter测试结果分析这一篇,我打算分成上下两部分.上篇,主要讲述如何使用jmeter中Assertion对结果进行简单的分类:下篇,主要讲述的是当我们拿到测试结果后,我们应该如何去看待这些测试结果 ...

  5. 4、kubernetes应用入门

    本随笔接前两两章,建立离master主节点和node01.node02.node03三个节点 kubectl子命令 master ~]# kubectl kubectl controls the Ku ...

  6. centos7安装VuePress

    VuePress可以帮你快速建站,使用MarkDown语法生成静态html yum install -y gcc-c++ make curl -sL https://rpm.nodesource.co ...

  7. CentOS 6 系统基础配置

    系统版本:CentOS 6.8 Minimal 采用最小化系统安装,许多组件默认是不安装的,通过手工安装一些常用工具包,让系统用起来更顺手. 1.设置机器名: # echo "NETWORK ...

  8. Python浮点型数据小数点的取舍

    python默认的是17位小数的精度 1.round()内置方法 π=3.1415926535 new_num=round(π,2)     #四舍五入保留两位小数 print(new_num)    ...

  9. .net代码混淆 .NET Reactor 研究 脚本一键混淆一键发布

    .net代码混淆 .NET Reactor 研究 为什么要混淆? .net比较适合快速开发桌面型应用,但缺点是发布出来的文件是可以反编译的,有时候为了客户的安全,我们的代码或者我们的逻辑不想让别人知道 ...

  10. python pandas dataframe 读取和写入Oracle

    1.代码:主要写入时表要为小写,否则报错 Could not reflect: requested table(s) not available in Engine from sqlalchemy i ...