利用for循环实现的隔行变色

最新推荐文章于 2024-01-03 10:38:55 发布
最新推荐文章于 2024-01-03 10:38:55 发布
阅读量2.8k 收藏 2
点赞数 2
文章标签： div xhtml javascript border function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suxiaxuhuanhuan/article/details/7299239
版权
 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script language="javascript" type="text/javascript">

  function get(){
 for(var i=1;i<=6;i++){

  if(i%2!=0){
  //给表格的背景加颜色
     document.getElementById("div"+i).style.background="red";
  //给字体加颜色
     document.getElementById("div"+i).style.color="blue";
  // alert("fffffffff");
   }else{
  //给表格的背景加颜色  
     document.getElementById("div"+i).style.background="blue";
  //给字体加颜色
     document.getElementById("div"+i).style.color="red";
    }
  
  }
   }

</script>
</head>

<body οnlοad="get()">
<table width="200" border="1">
  <tr id="div1">
    <td>我是红色</td>
  </tr>
  <tr id="div2">
    <td>我是蓝色</td>
  </tr>
  <tr id="div3">
    <td>我是红色</td>
  </tr>
  <tr id="div4">
    <td>我是蓝色</td>
  </tr>
  <tr id="div5">
    <td>我是红色</td>
  </tr>
  <tr id="div6">
    <td>我是蓝色</td>
  </tr>
</table>

</body>
</html>

suxiaxuhuanhuan
关注
HTML系列：n种方式实现隔行变色
云端-公子清
12-09 2563
n种方式实现隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
循环变化的颜色
weixin_33849942的博客
12-24 198
循环变化的颜色 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>7-75 课堂演示</title> 6 <link rel...
JavaScript for循环实现表格隔行变色
weixin_30628077的博客
10-19 496
本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript for循环实现表格隔行变色</title> <script> ...
蓝桥杯真题——隔行变色（基础for循环）
Mr_wangzu的博客
02-13 136
隔行变色，隔一行一个值，我们发现奇数蓝色，偶数白色，要我们求21-50多少蓝色，那么直接遍历，每当经过一个奇数，num（统计有多少蓝色，初始为0）加一。Excel表的格子很多，为了避免把某行的数据和相邻行混淆，可以采用隔行变色的样式。小明设计的样式为：第1行蓝色，第2行白色，第3行蓝色，第4行白色，....现在小明想知道，从第21行到第50行一共包含了多少个蓝色的行。请你直接提交这个整数，千万不要填写任何多余的内容。
vue v-for循环出来的数组加不同的颜色(颜色循环)
miem_yang的博客
10-13 7363
上面方块是由后端返回的数组 需求是每四个方块循环不同的背景颜色 下面展示一些 内联代码片。 // 具体v-for的代码块 <div v-for="(item, index) in appList" :key="index"> <span :style="{'background':item.color}"></span> // 方块 样式就不写了 <span>{{系统名称}}</span> </div> // appLi.
scss使用for循环遍历，动态赋值类名并配置不同颜色
weixin_42674490的博客
01-03 1259
需求：后端要传入不同的等级，前端通过等级展示不同的字体颜色，通过scss遍历更有利于动态修改颜色或者增删等级
JS与jQuery实现隔行变色的方法
10-21
接着，使用一个for循环遍历这些行，如果行的索引号（从0开始）对2取余的结果为0，即该行是偶数行，就将其背景颜色设置为"#888"。这样，所有偶数行的背景颜色都会变为灰色，形成隔行变色的效果。 接下来，我们看看...
JS实现列表页面隔行变色效果
10-20
在本例中，我们将探讨如何使用JavaScript实现列表页面的隔行变色效果。这个效果通常应用于表格，使得用户在浏览数据时能更快地区分每一行。 首先，我们需要一个包含数据的HTML表格。在示例代码中，我们有一个ID为`...
Table隔行变色的JavaScript代码
10-28
1. 表格隔行变色实现原理：利用JavaScript的DOM操作，通过获取表格中的每一行元素（tr），利用数组的遍历和模运算来判断当前行是奇数行还是偶数行。然后，根据行的索引位置为行元素添加不同的背景颜色样式（style....
jQuery实现隔行背景色变色
10-25
当然，隔行变色也可以通过纯CSS实现，例如使用`nth-child(2n)`选择器，但这不涉及JavaScript的动态特性。 总的来说，这个例子展示了jQuery在实际项目中的一个常见应用，同时也提醒我们理解jQuery的基本操作，如选择...
v-for循环出不同的背景色或图片
Aom_yt的博客
01-27 2656
使用场景 通常v-for循环出来的数据都是接口给到的，但是不会有iocn图标，或者设计稿的不同背景色，因此返回数据不同就进行不同颜色或图片变更。 思路 重点是通过v-bind进行绑定class，设置它的[index],在data里面进行定义，样式里面进行引入需要的背景图或者color样式，如果是背景图也同背景色写法。 <div class="icon" :class="color[index]" ></div> data(){ retu
python循环变颜色_在Python中使用循环变量在matplotlib中指定颜色
weixin_39960503的博客
12-05 1911
我有很多数据文件,我想在同一个图上绘制所有数据,但颜色不同.我使用以下代码from pylab import loadtxt, average, std, argsortfrom os import listdirfrom fnmatch import fnmatchimport matplotlib.pyplot as plta=[]for file in listdir('.'):if fnm...
song -这节课我们主要学习了for循环和颜色
少儿编程侯老师的博客
01-17 372
# 重复执行有次数限定 无限循环 # for 循环 # 格式 # color颜色 # 三原色 红黄蓝 颜料 # 三基色 光 0-1 颜色深度 红 绿 蓝 # 0-1 0-255 """ for 变量名 in 集合： 执行语句 """ import turtle import random turtle.speed(0) for i in range(9999): for ...
隔行变色
sunlizhen的专栏
06-15 221
//第一种： //首先获取div元素，因为要动态往div里添加p元素； var oDiv = document.getElementById("wrap"); //往div里动态添加p元素,因为要添加10个p每个p的内容不一样，所以要循环p； //var一个变量，初始值为空，以后要方变量的值； var str = ""; for(var i = 0;i10;i++){     i
jquery 实现隔行变色
Mike_8859的博客
11-08 507
//效果图 //代码 $(function(){ $("tr:odd").attr("bgColor","#DD1C73"); $("tr:even").attr("bgColor","#875BE6"); })                              11111               22222  
Vue学习笔记——for遍历列表，点击列表更改颜色
weixin_44154577的博客
03-05 668
案例需求 问题:点击列表中的哪一项，那么该项的文字就变成红色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .active{ color: red; } </style> <script src="https://cdn.jsdelivr.net/npm/vu
如何用while循环输出十行十列变色★☆
weixin_30668887的博客
11-12 674
输出十行十列星星 1 k = 0 #设置一个终止变量 2 while k < 10: 3 i = 0 #设置一个满十换行变量 4 while i < 10: 5 print('★',end='') 6 i += 1 #满十换行 7 print('\n',end=''...
Succi -学习for循环和 颜色
少儿编程侯老师的博客
12-14 652
import random import turtle turtle.speed(0) # 速度 turtle.shape('turtle') # 形状 turtle.color("red") turtle.width(5) turtle.bgcolor("black") # 画多少颗星星 for i in range(100): # 颜色什么组成 有太阳的颜色 # 太阳的颜色能分...
jQuery遍历实现隔行变色
蒗若晨曦
03-28 920
给网页中的元素添加onclick事件 $(document).ready(function(){ var oldcolor; $("tr").each(function(index,eleMe){ if(index%2==0){ $(this).css("background-color","#ffff99"); }else{ $(this).css("background-
在vscode中使用js实现隔行变色
最新发布
09-12
在Visual Studio Code (VSCode) 中使用JavaScript实现隔行变色，通常是指在网页中对表格或列表中的交替行应用不同的背景颜色。以下是一个简单的示例，展示了如何通过JavaScript和CSS来实现这个效果： 1. 首先，你需要有一个HTML文件，其中包含一个表格或列表元素。 2. 然后，在`<style>`标签中添加CSS规则，用于定义交替行的样式。 3. 最后，使用JavaScript选择所有的行元素，并通过循环为它们添加类名或其他属性，以应用隔行变色的样式。 示例代码如下： HTML: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隔行变色示例</title> <style> .odd-row { background-color: #f2f2f2; } </style> </head> <body> <table> <tr><td>行1</td></tr> <tr><td>行2</td></tr> <tr><td>行3</td></tr> <!-- 更多行 --> </table> <script src="script.js"></script> </body> </html> ``` JavaScript (script.js): ```javascript document.addEventListener('DOMContentLoaded', (event) => { const rows = document.querySelectorAll('table tr'); for (let i = 0; i < rows.length; i++) { if (i % 2 !== 0) { rows[i].classList.add('odd-row'); } } }); ``` 这段JavaScript代码在文档加载完成后执行，选择表格中的所有行，并通过一个循环为奇数行添加`odd-row`类，这个类在CSS中定义了背景颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值