利用jQuery和JS实现奇偶行背景颜色自定义效果

最新推荐文章于 2022-08-06 14:45:32 发布
最新推荐文章于 2022-08-06 14:45:32 发布
阅读量968 收藏
点赞数
分类专栏： js
本文介绍如何使用jQuery和JavaScript为表格中奇数行和偶数行设置不同的背景色，提供了两种实现方式：一种是使用jQuery，另一种是使用纯JavaScript。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

利用jquery实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
//可以是:$('#t1 tbody tr:even').css('background','red');
$('#t1 > tbody tr:even').css('background','red');
$('#t1 > tbody tr:odd').css('background','blue');
});
</script>
</head>


<body>
<table id="t1" width="500px" align="center">
<tbody> www.2cto.com
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>


</body>
</html>

 

利用js实现

<span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>

<script type="text/javascript">
//页面加载事件
window.onload=function(){
//获取table
var tb1 = document.getElementById("t1");
//获取table中的tbody
var tbody = tb1.getElementsByTagName("tbody")[0];
//获取tr
var trs = tbody.getElementsByTagName("tr");
//根据奇、偶行显示不同的背景颜色
for(var i=0; i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}
}
</script>
</head>

<body>
<table id="t1" width="500px" align="center">
<tbody>
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>
</body>
</html>

 

JQuery和JS实现奇偶行不同背景颜色
rotating_windmill
11-17 1679
JQuery实现: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> New Web Project $(function(){ //可以是:$('#t1 tbody tr:even').
《JS控制表格奇偶数行背景色变换》
qq_35119220的博客
02-24 5827
引言： 当我们利用html标记表签语言制作出一张普通的信息表格时，为了摆脱单调，提高用户体验，我们可以为其添加各种动态效果，以满足用户在操作表格时所带来的效果乐趣。 内容概括：当鼠标移动到表格上的相关单元行时，其相关行的背景色改变【颜色自定义】，并且单元行背景色的改变会根据表格行的奇偶性来改变，从而产生背景色变换的效果。 内容截图：
jquery学习之-设置table奇偶行的背景色，并触发单选框选中效果
wensummer的代码之旅
04-24 1561
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> TableBackColorDemo .even{background:
jquery css 设置table的奇偶行背景色
人生若南柯一梦
12-05 2625
.even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); });
用js实现将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
wangfei933的博客
06-08 2761
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>i+1</li> <li&g.
利用jQuery的组合实现表格的奇偶行背景色，并设置鼠标移动到表格行上时行的背景色。
L_w_J_的博客
05-14 1412
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script src="js/jquery-1.11.0.js"&gt;&lt;/s
利用JQuery和JS实现奇偶行背景颜色自定义效果
10-27
本文将详细探讨如何利用JavaScript（JS）和JQuery库实现网页中表格行（tr元素）的奇偶行背景颜色自定义效果。奇偶行背景颜色差异化是一种常见的用户界面改进，它有助于提高数据的可读性和视觉效果。本文将介绍两种...
表格奇偶行设置不同颜色的核心JS代码
10-26
通过这种奇偶行颜色区分的方法，可以显著提升表格数据的可读性和用户体验。这不仅适用于数据展示，也适用于其他需要区分条目的场景。在使用jQuery进行操作时，应该注意版本兼容性和性能优化的问题。另外，为保持代码...
JQuery来控制表格奇偶行的不同背景颜色显示
lishirong_李世荣的专栏
12-02 3432
概述：JQuery通过操作DOM来控制页面的显示。来看代码：       jQuery使不同行变不同的颜色    -->     .odd{background-color:#FFCCFF;} .even{ background-color:#CCFFFF;} .highlight{background-color:00FF00;}        $(document).ready(functi
自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)
03-20
在本项目中，我们主要探讨如何制作一个自定义的jQuery插件，用于实现表格的特殊样式功能，包括奇偶行颜色交替、鼠标滑过时的颜色变化以及单击高亮的效果。这个插件对于提高用户体验和美化网页数据展示具有显著作用。...
jq匹配偶数行_jquery怎么实现奇偶行不同背景颜色？
weixin_39562579的博客
12-20 454
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。代码如下所示：.odd {background-color:yellow;}.even {background-color:red;}No.10001No.20002No.30003No.40004显示效果：但是假设表格有上百行甚至上千行，同时不...
jquery css 设置table的奇偶行背景色示例
12-09
代码如下: <style> .even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} </style> 代码如下: [removed] $(function(){ $(“tr:odd”).addClass(“odd”); $(“tr:even”).addClass(“even”); }); [removed]
使用JS DOM操作将奇偶数列li背景色设置为不同颜色
weixin_46394746的博客
06-08 2602
要求：页面加载完成后将奇数列li的背景色设置为红色，偶数列li背景色设置为绿色 浏览器效果： 看完效果图，下面就是怎么实现的问题了： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ol</title> &lt
使用jquery实现如下界面效果（表格，奇偶行颜色不同）
scscdstfxqxxzqqc的博客
03-31 3132
使用jquery实现如下界面 提示： 1、奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500 2、选中行时，设置单选框选中状态 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入jquery库 --> <script src="../js/jquery.min.js" type="text/javascrip
jquery怎么设置表格奇偶行不同的颜色？
qq_45991812的博客
06-22 1624
在jQuery中使用“$("tr:odd").css("background-color","颜色")”与“$("#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。
原生js实现奇偶行不同背景
Azy15031175682的博客
09-18 327
本人最近开始学习前端了，发现很多东西需要机记载呀。以table为例，实现奇偶行的不同颜色背景，话不多说上代码。 1、首先要先有一个div 2、然后就是js实现了 ...
利用HTML和JS制作隔行换背景颜色的表格
aisijue2425的博客
11-16 278
1、源代码如下： <!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"> &lt...
JS/CSS 实现鼠标移动更改列表奇偶行背景色
m0_46181452的博客
08-06 3206
分别使用JS/CSS 实现鼠标移动到一个列表时， 奇数行显示一种背景色，偶数行显示另一种背景色。鼠标移出时，背景色复原；
JS实现奇偶行变色
z-ying-jian的博客
01-20 1938
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="keywords" content=""&gt; &lt;meta name="description&q
奇偶td改背景颜色
最新发布
03-11
### 使用 CSS 和 JavaScript 实现表格奇偶行不同背景颜色 #### 利用CSS实现奇偶行样式设置 对于现代浏览器支持的HTML文档，可以采用CSS3中的`:nth-child`伪类选择器来区分并设定表格内的奇数行和偶数行样式。具体来说： - 奇数行可以通过`.table > tr:nth-child(odd) > td { background-color: #ccc; }`进行样式指定[^3]。 同样地， - 对于偶数行，则可利用`.table > tr:nth-child(even) > td { background-color: anotherColor;}`完成相应样式的配置。 这种方法简洁高效，并且不需要额外加载JavaScript库或者编写复杂的脚本逻辑即可达到视觉上的交替效果。 #### 应用jQuery修改表格行样式 当考虑到兼容性问题或是需要更灵活的操作时，借助像jQuery这样的JavaScript框架也是一种不错的选择。通过简单的几行代码就能轻松实现在页面加载完成后自动为特定条件下的元素应用自定义class名称从而间接影响其外观表现形式。 例如，在DOM完全就绪之后执行如下操作能够有效地给除首行外的所有奇数行添加名为'odd'的新Class，而对偶数行则附加'even'class属性；除此之外还可以针对含有特殊字符串内容单元格实施高亮处理措施[^2]: ```javascript <script type="text/javascript"> $(document).ready(function(){ $('#tbody1 tr:odd').filter(':gt(0)').addClass('odd'); $('#tbody1 tr:even').filter(':gt(0)').addClass('even'); $('#tbody1 td:contains("Because of you")').addClass('highlight'); }); </script> ``` 值得注意的是上述方法依赖外部引入jquery.min.js文件才能正常工作。 #### 直接使用原生JS调整样式 除了以上两种方式之外，也可以不依靠任何第三方库仅靠纯JavaScript达成相同目的。下面给出了一段基于事件监听机制下动态更改tr标签内部td子节点背景色的例子: ```javascript window.addEventListener('DOMContentLoaded', function () { var rows = document.querySelectorAll("#Table tr"); Array.prototype.forEach.call(rows, function(row, index){ if(index % 2 === 0){ // even row row.style.backgroundColor = 'lightblue'; }else{ // odd row row.style.backgroundColor = '#e6e6fa'; } }); }); ``` 此片段会在整个网页资源解析完毕后触发一次匿名函数调用来遍历目标表单里的每一行记录，并依据索引位置判断当前行为奇还是偶进而赋予不同的底纹色彩[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值