jquery简单实现表格隔行变色
小知识点: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简单实现表格隔行变色的更多相关文章
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- Jquery 组 tbale表格隔行变色
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- 我的第一个jQuery插件--表格隔行变色
虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- JS实现表格隔行变色
用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...
随机推荐
- mysql 更新存在就累加,不存在就插入语法
INSERT INTO tb_http_tomcat_monitor_1 (id,total_res_time,total_req_count,req_dispose_count,queue_size ...
- Cortex-M3 异常中断向量表
[Cortex-M3异常与中断] 支持10个系统异常和最多240个外部中断: 支持3个固定的高优先级和多达256级的可编程优先级,支持128级抢占: #0~15在Cortex-M3中定义,IRQ#0~ ...
- webpack对vue单文件组件的解析
vue2.0 Step0: 首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序, [pitcher,...clonedRule ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_2_01传统架构演进到分布式架构
笔记 第二章 架构演进和分布式系统基础知识 1.传统架构演进到分布式架构 简介:讲解单机应用和分布式应用架构演进基础知识 (画图) 高可用 LVS+keepalive :负载均衡的知识点 1. ...
- phpstrom--------config php interpreter
phpstrom是一款比较好用的php代码编辑器,使用phpstrom进行代码编辑时我可能会需要看一下在网页上的实际效果,但是PHPstrom本身只是一款编辑器,不具备运行功能,我们需要自己安装一个服 ...
- LoadRunner脚本编写之二
LoadRunner脚本编写之二 编程基本语法必须要记牢.程序的思想也很重要. 下面来回顾一下嵌套循环例子. Action() { int i,j; //生命两个变量 for ( ...
- Day6 && Day7图论
并查集 A - How Many Answers Are Wrong 题意:已知区间[1,n],给出m组数据,即[l,r]区间内数据之和为s,求错误数据的数量. 拿到这道题,真的没思路,知道用并查集, ...
- django在进行模板render(渲染)时,对传过来的是字典中包含字典应用方法
网上自强学堂参考的 views.py def home(request): info_dict = {'site': u'自强学堂', 'content': u'各种IT技术教程'} return r ...
- Java 操作Word表格
本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...
- Golang中用interface{}接收任何参数与强转
函数的传值中,interface{}是可以传任意参数的,就像java的object那样.下面上我第一次想当然写的 ** 错误 **代码 package main func main() { Any(2 ...