jq 隔行变色（横、纵)

jQ不能使用this.css来设置样式,使用$(this).css来设置样式$('标签').hover(函数1，函数2); 分别定义了鼠标悬浮和鼠标离开事件

代码示例：
横向

<html><head><meta charset="utf-8"><title></title><script src="js/jquery-3.4.1.js"></script><style>tr{background-color: blue;}</style></head><body><table align="center" border="1px" cellpadding="0" width="600px" style="text-align: center;"><tr><td><span>11111</span></td><td><span>11112</span></td><td><span>11113</span></td><td><span>11114</span></td><td><span>11115</span></td><td><span>11116</span></td><td><span>11117</span></td></tr><tr><td><span>11111</span></td><td><span>11112</span></td><td><span>11113</span></td><td><span>11114</span></td><td><span>11115</span></td><td><span>11116</span></td><td><span>11117</span></td></tr><tr><td><span>11111</span></td><td><span>11112</span></td><td><span>11113</span></td><td><span>11114</span></td><td><span>11115</span></td><td><span>11116</span></td><td><span>11117</span></td></tr><tr><td><span>11111</span></td><td><span>11112</span></td><td><span>11113</span></td><td><span>11114</span></td><td><span>11115</span></td><td><span>11116</span></td><td><span>11117</span></td></tr><tr><td><span>11111</span></td><td><span>11112</span></td><td><span>11113</span></td><td><span>11114</span></td><td><span>11115</span></td><td><span>11116</span></td><td><span>11117</span></td></tr><tr><td><span>11111</span></td><td><span>11112</span></td><td><span>11113</span></td><td><span>11114</span></td><td><span>11115</span></td><td><span>11116</span></td><td><span>11117</span></td></tr><tr><td><span>11111</span></td><td><span>11112</span></td><td><span>11113</span></td><td><span>11114</span></td><td><span>11115</span></td><td><span>11116</span></td><td><span>11117</span></td></tr></table><script>$('tr').hover(function(){this.style.backgroundColor="pink";$(this).css('background-color','red');},function(){$(this).css('background-color','orange');})</script></body>
</html>

纵向

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style><script src="js/jquery-3.4.1.js"></script></head><body><table align="center" border="1px" cellpadding="2px" width="600px" style="text-align: center;"><tr><td><span>2</span></td><td><span>2</span></td><td><span>3</span></td><td><span>4</span></td><td><span>5</span></td><td><span>6</span></td><td><span>6</span></td></tr><tr><td><span>6</span></td><td><span>4</span></td><td><span>5</span></td><td><span>5</span></td><td><span>5</span></td><td><span>5</span></td><td><span>5</span></td></tr></table><script>$("td").mouseenter(function(){var index=$(this).index();$('tr').each(function(){$(this).children().eq(index).css('background-color','red').siblings().css('background-color','#0000FF')})})</script></body>
</html>

jq 隔行变色（横、纵)相关推荐

列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果
列表隔行变色 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset=" ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
表格元素的快捷获取以及隔行变色、鼠标移入变色案例
要求:以下列代码为基础,添加JS代码,令表格实现隔行变色效果,并且实现鼠标移入表格,该行表格背景色变为绿色,移出表格后表格恢复为原隔行变色形式的背景色. <table id='tab1' bor ...
webpack 的基本使用—— 创建列表隔行变色项目||在项目中安装和配置 webpack
创建列表隔行变色项目 ① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index ...
表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
2015年第六届蓝桥杯 - 省赛 - C/C++大学C组 - A. 隔行变色
隔行变色 Excel表的格子很多,为了避免把某行的数据和相邻行混淆,可以采用隔行变色的样式. 小明设计的样式为:第1行蓝色,第2行白色,第3行蓝色,第4行白色,- 现在小明想知道,从第21行到第50行 ...
点击按钮修改背景颜色及节点操作隔行变色案例
<input type="button" value="点击设置" id="dtn"/><div id="dd& ...
css 实现table 隔行变色
<html> <head> <title>Member List</title> <style> <!-- .datalist{bor ...

jq 隔行变色（横、纵)

jq 隔行变色（横、纵)相关推荐

最新文章

热门文章