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 ...
随机推荐
- laravel 文件上传总结
调用 store 方法会生成唯一的 ID 来作为文件名,如果想获取原件本来的名称可以使用 $file = $request->file('file'); $file->getClientO ...
- 代码实现:当我们下载一个试用版软件,没有购买正版的时候,每执行一次就会提醒我们还有多少次使用机会用学过的IO流知识,模拟试用版软件,试用10次机会,执行一次就提示一次您还有几次机会,如果次数到了提示请购买正版
package com.loaderman.test; import java.io.BufferedReader; import java.io.FileReader; import java.io ...
- 反编译中的 匿名内部类 this.val$的问题【我改】
转: 匿名内部类 this.val$的问题 一天偶尔在网上找到一个jar包,反编译后出现了如下的代码: public void defineAnonymousInnerClass(String nam ...
- mysql 索引失效的几种情况+
- Spring MVC模式下,获取WebApplicationContext的工具类 方法
在已有的注解类型下,获取WebApplicationContext的工具类 通过 WebApplicationContextUtils.getRequiredWebApplicationContex ...
- 树莓派 Raspberry Pi 4,.net core 3.0 ,Avalonia UI 开发
虽说.net core3.0已经可以用于开发wpf和winform程序,可是遗憾的时目前这core下的wpf还是只能运行在windows下,想要在linux下运行wpf估计还要等一段时间. Avalo ...
- YAML基础知识及搭建一台简洁版guestbook
一,前言 前面我们已经搭建过简易版k8s集群了,在此基础上可以搭建一个简洁版guestbook ,以便来学习k8s创建pod的整个过程. 二,在此之前,我们还需要学习一下YAML基础知识 YAML 基 ...
- Unreal Engine 4 优化教程
本教程旨在帮助开发人员提升基于虚幻引擎(Unreal Engine*4 (UE4))开发的游戏性能.在教程中,我们对引擎内部及外部使用的一系列工具,以及面向编辑器的最佳实践加以概述,还提供了有助于提高 ...
- finereport 通过条件弹出 alert进行提示
function convertDateFromString(dateString) { if (dateString) { var date = new Date(dateString.replac ...
- CVE-2018-2628
哈哈哈,终于等到我复现一个CVE漏洞了. 漏洞描述 Oracle Fusion Middleware(Oracle融合中间件)是美国甲骨文(Oracle)公司的一套面向企业和云环境的业务创新平台.该平 ...