隔行变色jquery 实现

最新推荐文章于 2023-11-14 19:48:16 发布
最新推荐文章于 2023-11-14 19:48:16 发布
阅读量656 收藏
点赞数
分类专栏： JAVAScript 文章标签： jquery xhtml function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyflcear/article/details/7835285
版权 
<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 奇偶变色</title>
<script type="text/javascript" src="Themes/js/jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#hacker").find("tr").addClass("odd");
$("#hacker").find("tr:even").addClass("even");
// $("tr").addClass("odd");
 //$("tr:even").addClass("even"); //奇偶变色，添加样式
 //$("#hacker tr").addClass("odd");
//$("#hacker tr:even").addClass("even");
});
</script>
<style>
#hacker tr:hover{background-color:red;}

.odd {background-color: #fff; /* pale yellow for odd rows */}
.even {background-color: #000; /* pale blue for even rows */}
</style>
</head>
<body>
<table id="hacker">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
</body>
</html>

三种方法，可以找到合适的
lyflcear
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery实现表格隔行变色
LHH201016的博客
08-22 1873
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
jquery如何实现隔行变色
tiankai戈
01-18 3159
实现隔行变色代码如下 描述:通过jQuery控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高级隔行变色</title> <style> *{ padding: 0;
jQuery表格的隔行变色
m0_57202083的博客
08-26 348
:even偶数行样式 :odd 奇数行样式 :contains('包含') <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.6.0.js"></script> </head> <body> <ta...
jQuery--表格隔行变色
qq_52567967的博客
09-27 2309
jQuery--表格隔行变色
使用jQuery实现表格隔行换色
最新发布
Fengjian2004的博客
11-14 318
【代码】使用jQuery实现表格隔行换色。
JQuery 实现隔行变色效果
m0_50873883的博客
07-19 648
前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <body> <table border="1px solid #ccc" cellpadding="0" cellpadding="0"> <thead> <tr> .
java循环隔行变色_jQuery实现的隔行变色功能【案例】
weixin_42350554的博客
02-25 182
摘要：这篇jQuery栏目下的“jQuery实现的隔行变色功能【案例】”，介绍的技术点是“jquery实现、jQuery、隔行变色、案例、变色、实现”，希望对大家开发技术学习和问题解决有帮助。本文实例讲述了jQuery实现的隔行变色功能。分享给大家供大家参考，具体如下：实现效果如图:html结构代码:我是第1个li标签我是第2个li标签我是第3个li标签我是第4个li标签我是第5个li标签我是第6...
jQuery实现隔行变色
qianzihao007
01-13 2530
简介：这里我主要用到了jQuery的两个方法odd(偶数),even(奇数) 一，html页面 <form> <div> <label>姓名</label> <input type="text" id="name"> </div> <div> <label>年龄</label>
jQuery实现简单隔行变色的方法
01-19
本文实例讲述了jQuery实现简单隔行变色的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> &...
jquery选取商品隔行变色
09-22
以上就是使用jQuery实现“商品隔行变色”的基本步骤和相关知识点。这个功能不仅可以用于商品列表，还可以应用于其他任何需要隔行变色的场景，如论坛帖子、表格数据等。理解并掌握这一技巧，有助于提升网页的交互性和...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
JS与jQuery实现隔行变色的方法
10-21
接下来，我们看看jQuery实现的隔行变色。jQuery提供了更为简洁的语法，使得代码更易读、更高效。在jQuery中，我们可以利用`:even`选择器选取所有索引值为偶数的元素。因此，只需一行代码`$('#tb tbody tr:even').css...
简单实现jquery隔行变色
10-19
本文将详细介绍如何通过jQuery实现隔行变色的几种方法，并提供具体实例代码供参考。 首先，我们需要了解jQuery的基础知识。jQuery是一个快速、简洁的JavaScript库，它封装了JavaScript中常用的功能代码，简化了HTML...
JS字符串的切分
lyfclear的专栏
11-08 3883
<br /><mce:script type="text/javascript"><!-- var str="x:1;y:2;z:3"; var sarry=new Array(str.length,2); var fsa=str.split(";"); for(i=0;i<fsa.length;i++) { var temp=fsa[i].split(":"); alert(temp); alert(temp[0]); sarry[i,0]=temp[0]; sarry[i,1]=te
网页弹出窗口在主网页的正中间,加入右侧广告
lyfclear的专栏
07-18 3200
$("body").append(" ") var MarginLeft = 10; //浮动层离浏览器右侧的距离 var MarginTop = 190; //浮动层离浏览器顶部的距离 var Width = 232; //浮动层宽度 var Heigth= 145; //浮动层高度 //设置浮动层宽、高
VUE-g2 y轴最小间隔设定
lyfclear的专栏
04-28 1564
原有显示 Y轴值随数据的变化自动调整，当间隔太少时不能准确反映数据的变化。在不改变数据转换的情况下将Y轴刻度限定到一定范围 import { Chart, registerShape } from '@antv/g2'; function splitData(data) { const marker = data.length - Math.floor(data.length * 0.4); const data1 = []; const data2 = []; for (l
jquery 控制framese的代码，以及控制frame页面的JS
lyfclear的专栏
08-29 1287
var _intervalx,steplengthx steplengthx=1000; //第一次触发时间 nextstepx=10000 ; //以后的触发时间 $(document).ready(function(){ _intervalx=setInterval("CheckUser()",steplengthx); }); function CheckUser() //发
不同浏览器下图片滚动效果的js
lyfclear的专栏
07-17 1268
遇到过JS无法在火狐浏览器上实现IE的效果，昨天查看了一下相应的代码完成了这一功能的实现做一下简单的记录 网上的资料很多但大多没有说明细节看到了峰之博文的一篇文章后才若有所思问题出现在那里。 var speed3=25//速度数值越大速度越慢var isIE = document.all && window.external; //判断是否非ieif(isIE==false)
用jQuery实现隔行变色
06-08
要使用jQuery实现隔行变色，可以使用以下代码： ```javascript $(document).ready(function(){ // 选择表格中需要变色的行 $("tr:even").css("background-color", "#f2f2f2"); $("tr:odd").css("background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lyflcear

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值