jQuery实现隔行背景色变色
隔行变色有很多中方法来实现,之前我都是直接将判断代码写在程序中,今天我们来使用jQuery实现,代码奉上~
jQuery代码:
$(function(){
var item = $("tr");
for(var i=0;i<item.length;i++){
if(i%2==0){
item[i].style.backgroundColor="#888";
}
}
//$("#tb tbody tr:even").css("backgroundColor","#888");
});
HTML代码:
<table id='tb'>
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第2行</td></tr>
<tr><td>第三行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
<tr><td>第6行</td><td>第6行</td></tr>
</tbody>
</table>
是不是很好玩,小伙伴们其实可以用jQuery实现很多好玩的东西的,大家自由发挥吧
相关推荐
-
JS实现简洁(隔行换色、高亮显示)表格特效
JS实现的表格 document.write(' '); var i=0; while(i') } document.write(' '+i+' '); i++; //document.write(' '); } if(i%10==0){ document.write(' '); } document.write(' '); var ys=null; function show(obj){ ys=obj.bgColor; obj.bgColor="red"; } function no
-
javascript表格隔行变色加鼠标移入移出及点击效果的方法
本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项. 说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1; 为了实现
-
实现隔行换色效果的两种方式【实用】
纯CSS方式实现隔行颜色交替.鼠标经过高亮颜色: <html> <head> <title></title> <style type="text/css"> ul{list-style:none} li:nth-child(odd){background-color:#eee} li:hover{background-color:Yellow} </style> </head> <body>
-
JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh
-
原生javascript实现隔行换色
js让我们一起从基础来学习,我们一点一点的来学习 下边是我写的代码,然后大家看着学习下吧!!! 复制代码 代码如下: <html> <head> <title>js演示</title> </head> <body> <script> document.write('<table border="1" width="100px" align="center"&
-
jQuery实现table隔行换色和鼠标经过变色的两种方法
一.隔行换色 复制代码 代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码 代码如下: $("table tr:nth-child(odd)").css("background-col
-
纯JS代码实现隔行变色鼠标移入高亮
在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #table { width: 400px; bor
-
使用JavaScript和CSS实现文本隔行换色的方法
先来看一个简单的方法. 在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色.在网页加载后通过 javascript 获取要变色的标签列表,执行如下代码: // 当文件加载时,执行代码. window.onload = function() { // 获取<ul id="list" />对象 var list = document.getElementById('list'); // 获取list下面的所有li va
-
JQuery操作表格(隔行着色,高亮显示,筛选数据)
查了些资料,写了4个Demo: 1. 隔行着色 复制代码 代码如下: $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 复制代码 代码如下: $("#table2 tr:contains('Fuck')").addClass("selected"); 3. 筛选数据 复制代码 代码如下: $("#filter"
-
js取模(求余数)隔行变色
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js取模隔行变色</title><script type="text/javascript"
随机推荐
- 如何利用DOS批处理实现定时关机操作详解
- jQuery ctrl+Enter shift+Enter实现代码
- NodeJs通过async/await处理异步的方法
- JS组件Bootstrap Table使用方法详解
- JavaScript event对象整理及详细介绍
- JavaScript Serializer序列化时间处理示例
- routeros的安装心得——ros双线负载均衡
- Java遍历Map键、值和获取Map大小的方法示例
- Formatting Long Lines 格式化多行字符的shell脚本
- 手把手教你把网上下载视频刻录成VCD、DVD的图文教程第1/2页
- jQuery中delegate()方法的用法详解
- 简单谈谈javascript中的变量、作用域和内存问题
- DevExpress获取节点下可视区域子节点集合的实现方法
- Android selector的实例详解
- C#页面之间跳转功能的小结
- Android 注册广播的两种方式对比
- 分析JAVA中几种常用的RPC框架
- Docker 配置网络使用bridge网络的方法
- python实现LBP方法提取图像纹理特征实现分类的步骤
- Unity实现轮盘方式的按钮滚动效果