js实现单双行以不同颜色显示

最新推荐文章于 2022-10-27 17:04:12 发布
最新推荐文章于 2022-10-27 17:04:12 发布
阅读量864 收藏
点赞数
文章标签： javascript ViewUI 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
		<title>单双行显示不同的颜色</title>
		<!--下面为javascript代码-->
		<script type = "text/javascript">
						window.onload = function color(){//窗口加载时调用
				var table = document.getElementById("person");//根据table的 id 属性值获得对象
				var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表
				for(var i = 0; i < rows.length; i++){
				 	if(i % 2 == 0){
				  		rows[i].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3
				    }
				    else{
				     	rows[i].style.backgroundColor = "White";//单数行时背景色为white
				 	}
				}
			}
		</script>
		<!--下面为css代码-->
		<style type = "text/css">
			#person
				{
					border-style:1px solid;
					border-color:blue;
					font-weight:bold;
					font-family:楷体,Arial, Helvetica, sans-serif;
					border-collapse:collapse;
					margin:auto;
				}
			#person th 
				{
					border:1px solid;
					padding:3px 7px 2px 7px;
					background-color:#A7C942;
					color:#ffffff;
					text-align:center;
				}
			#person td 
				{
					border-style:solid;
					border-width:1px;
					text-align:center;
				}
		</style>
	</head>
	<body>
		<table id = "person" align = "center" width = "90%" height = "200">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>电话</th>
				<th>爱好</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>33333333</td>
				<td>睡觉</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>44444444</td>
				<td>旅游</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>女</td>
				<td>55555555</td>
				<td>购物</td>
			</tr>
			<tr>
				<td>赵六</td>
				<td>男</td>
				<td>66666666</td>
				<td>看美女</td>
			</tr>
		</table>
	</body>
</html>

 

秋叶为何落
关注
JavaScript实现单双行以不同颜色显示
TechNovaX的博客
09-13 198
在网页开发中，有时候我们希望以不同的颜色来区分单行和双行，以增加内容的可读性。每一行的背景颜色将根据奇偶性进行区分，从而提高文本内容的可读性。首先，我们需要一个HTML文档，其中包含我们要显示的文本内容。我们将使用JavaScript来遍历每一行，并为每一行应用不同的颜色样式。在上面的JavaScript代码中，我们首先获取id为"content"的。文件中，我们将编写逻辑来遍历每一行，并为每一行应用相应的颜色类。方法遍历每一行，并根据行号的奇偶性为每一行添加相应的颜色类。，分别表示单行和双行的颜色样式。
js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
dibanmi2602的博客
08-10 384
1、js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr:odd td").css("background-color", color); //改变偶数行背景色 $("#GvList tr:odd")...
jquery针对单双行显示不同背景颜色
weixin_30470643的博客
07-10 802
//根据单双行显示不同背景色$('#table tr:even').css('backgroundColor','#E8E6E1');文中odd:单行，even:双行 转载于:https://www.cnblogs.com/TSPWater/archive/2010/08/25/1808271.html
css实现表格单双行颜色不同
shufudeyipi的博客
04-01 2130
.table tr:nth-child(odd) { background-color:#bd7064a3; }
JS 实现奇数偶数行颜色不同
夏沐的博客
01-13 7194
HTML代码部分： input type="button" value="隔行变色" id="btn"/&gt; &lt;ul id="uu"&gt; &lt;li&gt;红旗&lt;/li&gt; &lt;li&gt;五菱宏光&lt;/li&gt; &lt;li&gt;奔驰&lt;/li&gt
运用jquery实现table单双行不同显示并能单行选中
10-29
3. 在表格中实现单双行不同显示效果，可以通过 jQuery 为奇数行（或偶数行）应用不同的样式，以区分视觉效果。如示例代码所示，为奇数行的 `<p>` 元素设置了蓝色背景颜色，而偶数行的 `<p>` 元素则设置了黄色背景...
js根据表格某项指标使整行显示不同的颜色
Yueqin0512的博客
07-13 1141
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { width: 500px; margin: 100px auto; border: 2px gray solid; border-collapse: collapse; text-align: center; } td,th.
Turn.js 实现翻书效果(自适应单双页).zip
01-12
它通过CSS3和JavaScript实现，提供平滑的页面翻转过渡，使用户仿佛在操作一本真实的纸质书。 2. **自适应布局**：在不同的设备或屏幕尺寸下，Turn.js 能够自动调整展示方式。在宽屏设备上，通常显示为双页模式，而...
通过js实现表格隔行变色，基数行是颜色1，偶数行是颜色2，当鼠标经过某一行时，该行颜色为颜色3。
m0_57675124的博客
05-28 1151
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table border="1" cellspacing="0" width="400px"> <thead> <tr style="background-color: choc.
JS实现奇偶行变色
z-ying-jian的博客
01-20 1895
&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
JS实现表格隔行变色且悬浮在表格上改变该行颜色透明度
weixin_45445776的博客
10-27 932
通过JS实现表格的隔行变色，当鼠标悬浮在对应行上面，实现背景颜色的加深
js设置表格奇偶行的不同颜色，实现斑马效果
HuangsTing的博客
10-30 2790
让表格里的行更具有可读性的常用技巧是交替改变它们的样式背景，从而形成斑马线效果，使相邻的两行泾渭分明。通过分别设置奇数行和偶数行样式的办法可实现这种效果。如果浏览器支持CSS3，那么只需要如下两行样式： tr:nth-child(odd){background-color:#ffc;} tr:nth-child(even){background-color:#fff;} 另一种方法，可以编写一个...
表格行变颜色
Herr Apfel的专栏
12-01 1028
通过判断是否为单数即可 然后设置下行的背景颜色就可以了 if(i%2==1) row.style.background = "#CCCCff";else row.style.background = "#CCCCCC";
jsp表格中实现鼠标放到某一行，使这行背景变色，移开时背景色还原。
无道的博客
04-21 7382
思路：1、了解js获取表中tr。     2、了解鼠标移上、移出方法。             3、了解js中替换css中样式。 //获取tr         var rows = document.getElementsByTagName('tr'); //鼠标放在、或移出表格中某一行的效果。 for（int i=0;i if() }
js控制表格单双行颜色交替显示
01-17 367
<script language="JavaScript"> window.onload = function() { var Table=document.getElementById("table1"); var s = Table.rows.length; for (var i=1;i<s;i++) Tabl...
用js实现将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
wangfei933的博客
06-08 2650
<!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.
css+js控制文字颜色
weixin_45242954的博客
09-15 517
<HTML> <HEAD> <TITLE>CSS+JS控制文字</TITLE> </HEAD> <BODY> <STYLE> BODY {font-size: 8pt; font-family: Arial;} /* **********Found********** */ .datahead{font-size: 12pt; font-family: Arial; background-color: #00ccff;
JavaScript修改表格行的背景色，鼠标所在行颜色高亮
zhansan的博客
06-03 3224
使用JS修改表格行的背景色
html表格，显示单双行，单行为蓝色，双行为黄色
最新发布
04-01
<title>HTML表格显示单双行不同颜色 table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; } tr:nth-child(even) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值