jquery入门—选择器实现隔行变色实例代码 (仅仅一行代码，实现隔行变色！)

最新推荐文章于 2022-08-11 18:03:53 发布
最新推荐文章于 2022-08-11 18:03:53 发布
阅读量739 收藏 1
点赞数 1
分类专栏： web 实用小功能 Jquery 实用小功能
1、JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。 
2、JQuery选择器与JavaScript相比，具有代码简单、完善的检测机制的优势。 
3、使用JQuery选择器实现隔行变色，示例代码如下 ： 
复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> 使用JQuery实现隔行变色 </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
body{font-size:12px;text-align:center} 
#tbStu{width:260px;border:solid 1px #666;background-color:#eee} 
#tbStu tr{line-height:23px} 
#tbStu tr th{background-color:#ccc;color:#fff} 
#tbStu .trOdd{background-color:#fff} 
</style> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$("#tbStu tr:nth-child(even)").addClass("trOdd"); 
}) 
</script> 
</HEAD> 
<BODY> 
<table id="tbStu" cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th> 
</tr> 
<tr> 
<td>1001</td><td>张小明</td><td>男</td><td>320</td> 
</tr> 
<tr> 
<td>1002</td><td>李明旗</td><td>女</td><td>350</td> 
</tr> 
</tbody> 
</table> 
</BODY> 
</HTML> 

效果图如：
 
4、使用JavaScript实现隔行变色的代码如下 ： 
复制代码代码如下:

<script type="text/javascript"> 
window.οnlοad=function(){ 
var oTb=document.getElementById("tbStu"); 
for(var i=0;i<oTb.rows.length-1;i++){ 
if(i%2){ 
oTb.rows[i].className="trOdd"; 
} 
} 
} 
</script> 

JQuery实现隔行变色代码 ： 
复制代码代码如下:

</script> 
<script type="text/javascript"> 
$(function(){ 
$("#tbStu tr:nth-child(even)").addClass("trOdd"); 
}) 
</script> 

两者相比，明显JQuery代码更简单。
xueshandugu
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery入门——选择器实现隔行变色
liang408015204的专栏
01-04 1275
1、JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。 2、JQuery选择器与JavaScript相比，具有代码简单、完善的检测机制的优势。 3、使用JQuery选择器实现隔行变色，示例代码如下：     使用JQuery实现隔行变色               body{font-siz
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> .
jQuery选择器实现隔行变色
weixin_34220623的博客
10-25 198
<script type="text/javascript"> $(function(){ $("#tableName tr:nth-child(even)").addClass("trOdd"); }) </script> 转载于:https://www.cnblogs.com/snowhite/p/4908821.html
财经类的表格变色写法 几行代码搞定 简单易懂
SanRenKing的博客
11-27 207
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
jQuery隔行变色实现代码
周十一的技术博客
06-08 831
body { font-size:12px;text-align:center; } #tbStu { width:260px;border:1px solid #666;background-color:#eee; } #tbStu tr { line-height:23px; } #tbStu tr th { background-color:#ccc;
Javascript知识【jQuery样式操作&案例：jQuery隔行换色】
日常学习总结
08-11 4860
主要介绍jQuery操作css样式，以及巩固知识的一个案例用jQuery进行隔行换色
jquery入门—选择器实现隔行变色实例代码
10-27
在本文中，我们将深入探讨jQuery选择器及其在实现隔行变色效果中的应用。隔行变色是一种常见的网页设计技巧，通常用于表格，使得用户能更清晰地区分每一行数据。jQuery选择器使得这一过程变得更为简洁高效。 首先，...
jQuery 学习入门篇附实例代码
10-29
这个示例展示了如何使用jQuery改变表格行的颜色，包括mouseover、addClass、mouseout、removeClass、click和toggleClass等方法，以及CSS选择器如`:even`来实现隔行变色和鼠标悬停、点击效果。 8. **示例8 - toggle...
jQuery高级应用（上篇）
qq_37122159的博客
07-20 260
学习辅助资料为：JavaScript+jQuery动态网页设计案例课堂（第2版） jQuery的基础知识 jQuery是一个优秀的JavaScript脚本库。是一个兼容多浏览器的JavaScript框架。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>用...
devexpress html编辑器,图解DevExpress RichEditControl富文本的使用，附源码及官方API
weixin_30995661的博客
06-29 1492
9点半了，刚写到1、2。 该回家了，明天继续写完。大家还需要什么操作，留言说一下，没有的我明天继续加。好久没有玩DevExpress了，今天下载了一个玩玩，发现竟然更新到14.2.5了。。我去。本章主题：创建自定义的工具条按钮项图片解析操作修正文档字体内容搜索功能导入导出功能(文本/HTML/Word)官方相关API废话不多说，进入正题。一.创建项目，窗体搭建1.新建C#.NET WinFor...
网页里面表格隔行变色代码
11-20
表格隔行变色 表格变色 表格单元格标色，实现方式是奇偶数隔行变色，点击变色！
JavaScript实现99乘法表及隔行变色实例代码
10-22
最近做了个项目是要求实现99乘法表隔行变色，本文给大家分享通过多种方式实现js 99 乘法表，感兴趣的朋友一起看看吧
实现表格的隔行变色
11-13
实现表格的隔行变色
jquery案例3——jq隔行换色
努力、拼搏、奋进
05-16 905
一、案例描述 隔行换色 二、案例效果演示 三、案例整体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
jquery隔行变色代码
踏雪留痕的专栏
10-18 813
方法1: $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) //实现表格的隔行换色效果   方法2:  $("tr:even").addClass("alt");    /
隔行变色java代码_纯js实现隔行变色效果
weixin_34194499的博客
03-02 284
本文实例为大家分享了js实现隔行变色的具体代码，供大家参考，具体内容如下function createTable(){//创建表格var table = document.createElement("table");//设置表格的行数for(var i=0;i<4;i++){var tr = document.createElement("tr");//设置表格的列数for( var j=...
jQuery过滤选择器新手练习（又是隔行变色）-来自于三人行慕课
weixin_44424187的博客
07-01 240
原文来源：https://www.3mooc.com/front/articleinfo/186 上次发过一篇jQuery关于DOM对象和jQuery对象使用的隔行变色效果实现的新手练习文章。 今天在这里再做一次隔行变色，来练习使用jQuery过滤选择器。 第一步：创建HTML 我是第1个li 我是第2个li 我是第3个li 我是第4个li 我是第5个li 我是第6个li 我是第7个li 我是第...
jQuery实现隔行变色代码
mayanling0113的专栏
03-20 442
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 简单选择器学习 //使用jquery加载事件 $(document).ready(function (){    $("tr:even").css("background","#ffff99")
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码
weixin_33765959的博客
03-02 171
1、JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。2、JQuery选择器与JavaScript相比，具有代码简单、完善的检测机制的优势。3、使用JQuery选择器实现隔行变色，示例代码如下： 使用JQuery实现隔行变色 body{font-size:12px;text-align:center}#tbStu{width:26...
用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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值