小知识点: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. JDBC——JDBC基础

    1.JDBC与数据库的交互过程概括性来说,JDBC与数据库交互有以下这些步骤:1.建立一个到数据库的连接.2.在数据库中对表执行检索.创建,或修改的SQL查询.3.关闭到数据库的连接.JDBC的类和接 ...

  2. selenium爬虫使用

    1. 网页的打开 from selenium import webdriver import time driver = webdriver.Chrome(executable_path=r" ...

  3. Groovy脚本基础全攻略

    1 背景 Groovy脚本基于Java且拓展了Java,所以从某种程度来说掌握Java是学习Groovy的前提,故本文适用于不熟悉Groovy却想快速得到Groovy核心基础干货的Java开发者(注意 ...

  4. Tensorflow的gRPC编程(一)

    https://blog.csdn.net/langb2014/article/details/69559182 如何用TF Serving部署TensorFlow模型 https://www.jia ...

  5. re 模块, 正则表达式 \w+\d+ 的重复问题引发的题目解析

    题目 计算以下代码的结果 s = "?!.18)dajslj$12.15613sdadw.123sdasda35615.168sndsda$15.6sdasd.sdfsdgw123.156s ...

  6. 微信小程序开发工具下载以及安装教程

    微信公众平台上登录你的微信小程序账号   登录进入小程序开发-工具-下载,再根据你的系统选择相对应的版本地址进行下载.   以管理员身份运行下载,点击下一步,如图所示:   下一步,就会出现许可证协议 ...

  7. JS方法调用jQuery内部方法

    转载于:https://blog.csdn.net/tsoTeo/article/details/77848932 已经测试过,可以正常调用!!以下为原文: JS方法能不能调用JQuery里面的方法  ...

  8. 从内存上看python的对象

    python中有一个说法:一切皆是对象,怎么理解这句话呢?我们可以通过查看数字,字符串在内存中的表示形式来对这句话有个更深的认识. 那么,怎么查看对象在内存中是什么样的呢?可以先参考一些这篇文章:ht ...

  9. kean的博客今天开通了,happy 一下

    希望以后可以日日勤勉,孜孜不倦的记录我的一生!

  10. 【LeetCode】 454、四数之和 II

    题目等级:4Sum II(Medium) 题目描述: Given four lists A, B, C, D of integer values, compute how many tuples (i ...