jQuery实现表格隔行换颜色：
jQuery实现表格各行换颜色：
截图如下：
代码如下：
<span style="font-family:Microsoft YaHei;font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>表格各行变色</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">$(function(){$("tr:odd").addClass("odd"); <%--为基数行添加样式--%>$("tr:even").addClass("even"); <%--为偶数行添加样式--%>});
</script>
<style type="text/css">.even{background: #ffcccc; <%--定义偶数行样式--%>}.odd{background: #66cccc; <%--定义基数行样式--%>}
</style>
</head><body>
<table width="383" height="257" border="1" align="center"><tr><td width="121"><div align="center">学号</div></td><td width="171"><div align="center">姓名</div></td><td width="139"><div align="center">专业</div></td></tr><tr><td><div align="center">0101</div></td><td><div align="center">小城</div></td><td><div align="center">小学教育</div></td></tr><tr><td><div align="center">0101</div></td><td><div align="center">小城</div></td><td><div align="center">小学教育</div></td></tr><tr><td><div align="center">0101</div></td><td><div align="center">小城</div></td><td><div align="center">小学教育</div></td></tr><tr><td><div align="center">0101</div></td><td><div align="center">小城</div></td><td><div align="center">小学教育</div></td></tr><tr><td><div align="center">0101</div></td><td><div align="center">小城</div></td><td><div align="center">小学教育</div></td></tr><tr><td><div align="center">0101</div></td><td><div align="center">小城</div></td><td><div align="center">小学教育</div></td></tr><tr><td><div align="center">0101</div></td><td><div align="center">小城</div></td><td><div align="center">小学教育</div></td></tr>
</table>
</body>
</html>
</span>jQuery实现表格隔行换颜色：相关推荐
- elementui表格隔行换色
关于elementui的表格隔行换色,我呢也是找了很多博客,但是都是死值,对于我这种后端的程序员还是怎么都看不顺眼的,对于隔行换色,应该也不算难点吧,但是让我绞尽脑汁,属于在学校的一个要求,自己写下来 ...
- Javascript知识【案例：表格隔行换色】
目录 1,案例1:表格隔行换色 2,案例2:鼠标移入粉色,移出原色[基础+] 2.1:需求说明 2.2:前置知识:鼠标移入移出事件 2.3:前置拓展知识:this关键字 2.4:分析&实现 1 ...
- 使用css选择器实现表格隔行换色
使用css选择器实现表格隔行换色 <style>*{margin: 0;padding: 0;}body{padding: 200px;box-sizing: border-box;}ta ...
- Vue中实现表格隔行换色效果
一.原理 在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
- [原创]持续给力：jQuery实现表格隔行变色效果案例详解
本案例源码 jQeruy20110323.rar 由于这几天忙着给学生出卷.测试等相关工作,导致这几天博客没有更新太多的东西,从本周开始我会持续的原创一些jQuery方面的文章,也请大家继续关注,我的 ...
- JQuery 表格隔行换色
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
- jQuery 设置表格隔行变色、隔列变色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 转，帅气的表格隔行换色+鼠标经过变色、点击变色
源码是: <style type="text/css"><!– #senfe { width: 650px; border-top: #E3E3E3 1px so ...
- WEB前端知识大整合之Jquery表单隔行换色
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
最新文章
- 如何利用装饰者模式在不改变原有对象的基础上扩展功能
- Android2.3操作系统即将发布，亮点解读
- hello first one
- linux安装tree命令
- 嵌套向量中断控制器NVIC和系统控制块SCB特性
- gen_fsm之门禁管理
- 第2章[2.6] 组件与容器的选择与开发
- 【推荐系统】那些年, 引用量超1000的经典推荐系统论文
- 天若OCR文字识别开源版 v5.0.0
- 深度装机大师一键重装_deep深度装机大师一键安装Win10 64位旗舰版
- Java网络编程（9）NIO - 群聊系统
- linux系统pdf转图片
- 数据库基础技巧及用法
- 深度学习论文: An Improved One millisecond Mobile Backbone及其PyTorch实现
- 微信小程序开发手记1.0
- java计算月份所在的季度
- ASEMI代理ADM202EARNZ-REEL原装ADI车规级ADM202EARNZ-REEL
- Android笔记之（图片高斯+Glide实现微信图片加载策略+仿微信进度条）
- 从0-1，用51单片机做一个积分计时器，以乒乓球为例
- 武汉大学和厦门大学计算机,武汉大学和厦门大学谁更强，为什么有人说这两所大学名气大于实力...
热门文章
- 保存hbitmap到文件
- 【Modern OpenGL】转换 Transformations
- php 提取前一百个字,如何在PHP中提取字符串的前100個字符?
- mysql查当前用户的的命令_mysql命令大全用户管理相关命令
- Java学习笔记—TCP通信
- SharePoint2013 2019性能及限制
- gperftools mysql_利用 gperftools 对nginx mysql 内存管理 性能优化
- 面向过程和面向对象的联系和区别
- 【Python CheckiO 题解】Roman Numerals
- QQ炫舞手游显示进入服务器失败6,qq炫舞手游进不去怎么办 游戏进不去方法详解[多图]...