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 ...
随机推荐
- linux中的i2c控制器驱动应该做些什么?
答:完成读写功能即可,不要涉及任何针对从设备的特殊操作,这样就可以避免与从设备的代码产生冗余,linux中的i2c控制器驱动就做的特别棒,做好最简单的读写,然后其它的从设备驱动就是直接调用这些最简单的 ...
- [go]go环境安装-解决安装包不能访问golang.org问题
安装go和vscode vscode插件列表选择go,安装即可,其他插件暂不安装 手动安装一些vscode配套的调试工具等 直接vscode-go,然后点下面的go-tools就能找到 go get ...
- linux系统交互通道
默认有6个命令交互通道和一个图形界面交互通道,默认进入到的是图形界面通道 命令交互模式切换:ctrl+alt+f1---f6 图形交互界面 ctrl+alt+f7 1.图形界面交互模式 ...
- MYSQL 中 MyISAM与InnoDB两者之间区别与选择,详细总结,性能对比
1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...
- Setup Python 开发环境和IPython的基本使用
目录 目录 前言 软件准备 Python交互式Shell 为Python Shell添加补全功能 IPython-400 IPython功能和特性基础 可直接使用部分的Bash指令 别名alias语法 ...
- MySQL 对 IP 字段的排序问题
MySQL 对 IP 字段的排序问题 问题描述 想对一张带有 IP 字段的表,对 IP 字段进行升序排序,方便查看每个段的 IP 信息. 表结构和表数据如下: SET NAMES utf8mb4; ; ...
- 重启Tomcat, vsftpd
关闭,启动,查看Tomcat /usr/local/tomcat8/bin/shutdown.sh /usr/local/tomcat8/bin/startup.sh tail -300f /usr/ ...
- UnitTest之Xunit
Unit Test 1.建立单元测试 新建一个类库项目,在Nuget中搜索xunit,选择 xUnit.net 和 xunit.runner.visualstudio 插件包安装. xunit.run ...
- caoz的梦呓:找工作么?会坐牢的那种。
猫宁!!! 参考链接:https://mp.weixin.qq.com/s/kj9crZIIrS_8IzuYzukydw 很多年轻人,初入职场,确实背景资历不够强,眼界阅历也不够,有时候稀里糊涂就误入 ...
- 目前最新u盘启动快捷热键一览表
现在重装系统已不再是件难事了,一个普通的u盘就可以帮你搞定,但是对于一些新手来说在使用u盘启动盘安装系统是也许会遇到这样的小问题,面对一台新电脑时不知道该如何让电脑优先访问u盘从而进入PE系统下进行装 ...