1.css样式（style）

        <style>a{  text-decoration:none;color: green;}.even{background-color: #aaffff;}.odd{background-color: #ffff7f;}.headcss{background-color: #00aaff;}.hovercss{background-color: #ea8202;}</style>

2.展示部分

        <table border="1" align="center" cellspacing="0" cellpadding="6"><thead class="headcss"><tr><th><font size="5">11111</font></th><th><font size="5">22222</font></th><th><font size="5">33333</font></th></tr></thead><tbody align="center"><tr><td>1-1</td><td>2-1</td><td>3-1</td></tr><tr><td>1-2</td><td>2-2</td><td>3-2</td></tr> <tr><td>1-3</td><td>2-3</td><td>3-3</td></tr><tr><td>1-4</td><td>2-4</td><td>3-4</td></tr>  </tbody></table>

3.jquery代码部分（script）

        <script>$(document).ready(function(){$("tbody tr:even").addClass("even");$("tbody tr:odd").addClass("odd");$("tbody tr").hover(function(){$(this).addClass("hovercss").siblings().removeClass("hovercss");})}); </script>

------------分割线---------------

菜鸟古古 2022-1-6 18:46:37

HTML(HBuilder)作业题4- 隔行换色（jquery）相关推荐

Web前端第四季(jQuery):四:301-jQuery基本过滤器(奇数和偶数)+302-实现隔行换色+401-祖先选择器和子代选择器
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school ...
jquery 表格（鼠标悬停改变改变行背景+隔行换色）
NUM1:鼠标悬停改变改变行背景: NUM2:隔行换色: HTML: <table border="1"><thead><tr><th&g ...
前端简单入门第十八讲使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
使用jquery实现隔行换色($(tbody tr:odd)获取奇数行和$(tbody tr:even)获取偶数行)以及CSS类操作addClass()的使用
使用jquery实现隔行换色技术分析最主要的就是jquery的选择器获取tbody的奇数行("tbodytr:odd")设置背景颜色在获取tbody的偶数行("tb ...
JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
JQuery基础下面案例用到的资源包:https://download.csdn.net/download/weixin_44537122/11879014 1.内容 1. JQuery 基础:1. ...
java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: CSS+Js实现Li列表隔行换色效果 .mytable {border-collapse:colla ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
SSRS 2012 聚合函数 -- 隔行换色示例
SSRS 2012 聚合函数 -- 隔行换色示例有时我们希望报表能够显示出数据笔数的流水序号,如果要使用T-SQL查询来做出这种效果,通常必须使用RANK函数以自动产生编号,在此将介绍如何使用SSR ...
AJAX实现页面选项卡、隔行换色、弹出层功能代码
代码简介:AJAX实现页面选项卡.隔行换色.弹出层功能代码代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

HTML(HBuilder)作业题4- 隔行换色（jquery）

1.css样式（style）

2.展示部分

3.jquery代码部分（script）

HTML(HBuilder)作业题4- 隔行换色（jquery）相关推荐

最新文章

热门文章