利用js实现代码的隔行换色

于 2023-08-26 11:04:23 发布
阅读量310 收藏 1
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a000515/article/details/132509289
版权 
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>表格隔行换色</title>
	<script>
		window.onload = function () {
			var a = document.getElementById("td1");
			var len = a.tBodies[0].rows.length;
			for(let i=1;i<len;i++){
			
				if(i%2==0){
					a.tBodies[0].rows[i].style.backgroundColor="pink"
				}else{
					a.tBodies[0].rows[i].style.backgroundColor="gold"
				}
			}
		}
	</script>
</head>

<body>
	<table border="1" width="500" height="50" align="center" id="td1">
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>25</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>27</td>
		</tr>
		<tr>
			<td>4</td>
			<td>赵六</td>
			<td>29</td>
		</tr>
		<tr>
			<td>5</td>
			<td>田七</td>
			<td>30</td>
		</tr>
		<tr>
			<td>6</td>
			<td>汾九</td>
			<td>20</td>
		</tr>
	</table>
</body>

</html>

Fᴏʀɢᴇᴛ232
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表格隔行变色2020/11/21
weixin_50286102的博客
11-21 605
onmouseover:鼠标经过事件 onmouseout:鼠标离开事件 元素 定义了一个包含数据的表格单元格 代表行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht.
【JS】原生 js 监测 某个 DOM进入 可视区
呆呆狗
07-16 533
就是 这个 IntersectionObserver 对象， MDN 中有介绍， vue3 版本的 vueuse/core 其实也是根据这个封装的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
使用JavaScript实现点击按钮实现隔行换色
song17631538490的博客
11-29 771
给按钮标签设置点击事件给按钮后续使用if语句进行判断因flag默认值为true所以if（flage）=if(true) 就会执行if语句下的代码。设置循环主要是为了将li标签全部循环一遍因为是隔行变色所以通过i%2==0获取到不相邻的两个数后续修改下标不相邻两个数的li标签设置新的class属性 从而实现点击后隔行换色的效果。添加flage是为了让按钮可以重复点击使用点击第一次 运行的是if（fage）里的代买再点击一次 运行的是else里的代码。
DOM操作,隔行换色
weixin_65014714的博客
02-04 1220
这两种方法都是行内样式,都是点击事件,后续我还会上传通过css样式,控制背景色,还有鼠标进入离开的隔行换色
JS 隔行换色
温柔归故里
03-18 586
JS 隔行换色
js实现表格隔行换色
SqlloveSyn的博客
12-27 980
js实现表格隔行换色
基于JavaScript实现表格隔行换色
10-15
为了解决这个问题，我们可以使用JavaScript来实现表格隔行换色的功能，从而提升用户的浏览体验。本文将详细介绍如何基于JavaScript实现这一功能。 首先，我们需要理解JavaScript中与表格相关的DOM对象和属性。在...
利用JS动态生成隔行换色HTML表格的两种方法
10-17
【JS动态生成隔行换色HTML表格】 在网页开发中，有时我们需要根据用户输入的数据动态创建HTML表格，并且为了提高视觉效果，我们通常会实现隔行换色的功能。本文将介绍两种JavaScript方法来实现这一目标。 ### 方法...
实现表格隔行换色效果特效代码
03-20
本教程将详细介绍如何实现表格隔行换色的代码实现。 首先，我们需要了解HTML表格的基本结构。在HTML中，`<table>`标签用于创建一个表格，`<tr>`表示表格行，`<td>`表示单元格。例如： ```html 数据1 数据2 ...
CSS2实现的隔行换色
10-30
利用该选择符，我们可以实现隔行换色效果。 下面是实现隔行换色的示例代码： ``` tr { background: #eee; } tr + tr { background: #ccc; } tr + tr + tr { background: #eee; } tr + tr + tr + tr { ...
JS实现li隔行换色
12-27
简单的代码实现华丽的效果，您所需的。隔行换色。
16进制ic卡号转换（将12345678转换成78563412）
frank_fong的博客
01-14 8197
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js隔行换色
asd_160529的博客
07-19 486
js实现隔行换色
js实现隔行变色
热门推荐
zhang的博客
10-16 1万+
&lt;body&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&
js表格隔行变色
weixin_46670235的博客
03-13 1404
个人推荐vscode编写前端 功能强大 兼容性强 实现思路 构建好HTML框架 CSS修饰之后 将获取的tbody的tr定义为一个数组，通过for循环实现遍历，注册鼠标经过与离开事件，将trs[i]的背景颜色换掉，此处我是通过改变ClassName实现的，在CSS中写出对应更改的id属性，改为需要的背景色 *获取的trs不包括表头元素 代码如下：（如有问题，欢迎指正） <!DOCTYPE html> <html lang="en"> <head> &l.
原生js实现隔行变色
Cyq_0927的博客
11-23 744
<!DOCTYPE html> <html> <!--这个代码只是演示了用原生js实现隔行变色的效果，有些瑕疵--> <head> <meta charset="utf-8" /> <title>隔行变色</title> <!-- 引入外部js --> <script src="j
JS实现隔行变色
kumayato的博客
05-11 464
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } li { line-height: 30px;
【js案例】webApi实现隔行变色
belloc_li的博客
02-26 303
今天用js中的webApi来实现隔行变色的效果。 目的是 点击btn 修改所有li元素颜色（单行：橙色 双行：粉色） 单行和双行和可以使用if判断， 步骤： 1.获取元素 2.注册事件 3.事件处理 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi
实现隔行换色功能，颜色随机
最新发布
04-02
可以使用CSS的伪类选择器nth-child来实现隔行换色，同时使用JavaScript生成随机颜色。 ... ... 姓名 年龄 ...上面的JavaScript代码会为每行随机生成一...将CSS和JavaScript代码加入HTML文件，即可实现隔行换色并随机颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值