js实现隔行换色

最新推荐文章于 2025-04-15 10:44:14 发布
最新推荐文章于 2025-04-15 10:44:14 发布
阅读量1.4k 收藏 1
点赞数
文章标签： html javascript function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/taokai/article/details/2059381
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
  <title>js实现隔行换色---阿会楠练习作品（为我所写，非我所想）</title>
  <script language="JavaScript" type="text/javascript">
   window.onload = function(){
    var tr_ = document.getElementById("myTable").getElementsByTagName("tr");
    for(var i = 0;i < tr_.length; i ++){
     tr_[i].style.backgroundColor = i%2==0?"#FFE3AD":"#FFFFFF";
    }
   } 
  </script>
 </head>
 <body>
  <table id="myTable">
   <tr><td>阿会楠</td></tr>
   <tr><td>搜索吧</td></tr>
   <tr><td>为站长提供专业知识搜索</td></tr>
   <tr><td>有时真想做一个稻草人</td></tr>
   <tr><td>在一望无际的田野上</td></tr>
   <tr><td>看着人来人往</td></tr>
   <tr><td>在一个被人遗忘的小角落里</td></tr>
   <tr><td>我依旧在守候着</td></tr>
  </table>
 </body>
</html>

 

taokai
关注
JS之隔行变色
小书包的博客
01-09 956
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
JS实现li隔行换色
12-27
简单的代码实现华丽的效果，您所需的。隔行换色。
JS 隔行换色
温柔归故里
03-18 665
JS 隔行换色
JavaScript 实现表格隔行换色与增删功能
最新发布
2503_91259466的博客
04-15 868
下面是一个完整的实现方案，包含以下功能：点击"添加"按钮添加新行点击"删除"按钮删除当前行自动实现隔行换色效果删除后自动重新排序序号。
原生 js 监测 某个 DOM进入 可视区
呆呆狗
07-16 657
就是 这个 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.
基于js实现隔行换色。
nowchange的博客
05-24 1032
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; ...
JS实现隔行换色
m0_71966801的博客
07-07 955
在 JavaScript 部分，我们首先通过 getElementById 方法获取到表格元素。然后使用 querySelectorAll 方法选择所有带有 "row" 类名的 tr 元素，在循环中对每个行元素进行判断，如果行索引是奇数，则将其添加 "even" 类名，以改变其背景色。上述事例使用了一张表格来展示数据，并给每个数据行的 tr 元素添加了类名 "row"。通过 CSS 样式设置了奇数行的背景色为灰色。
原生javascript实现隔行换色
10-24
总的来说，原生JavaScript实现隔行换色的关键在于理解DOM操作、条件语句以及事件处理。通过这种方式，我们可以为网页增加交互性和美观性，提升用户体验。同时，这也是一种很好的实践JavaScript基本技巧的机会，包括...
JS实现隔行换色的表格排序
10-20
在本文中，我们将探讨如何使用JavaScript实现一个功能丰富的表格，包括隔行换色和排序功能。首先，让我们逐个解析这个任务涉及的关键知识点。 1. **获取元素**：在JavaScript中，我们可以使用不同的方法来获取页面...
javascript 隔行换色函数代码
10-28
这种效果在JavaScript中可以很容易实现，而不需要依赖CSS样式，利用JavaScript动态地给元素添加类名来改变背景色，从而实现隔行换色的效果。 在上述的代码片段中，我们首先定义了一个函数changeRowsBg，这个函数的...
js之隔行换色
weixin_58462329的博客
04-14 877
大家可以看一下，我把具体解释都写在代码里面的注释上面了，不会的看下注释哦。接下来就在js里面写时间了，先写点击增加按钮执行的操作。大家好，今天来学习的是增加表单并且使他们每隔一行变色。如上图所示，这就是我们今天需要完成的效果。我们先写一个表格并且修改一下他们的样式。先让大家看下下效果图。
JS实现隔行变色
kumayato的博客
05-11 516
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } li { line-height: 30px;
js 隔行换色
01-09
js 隔行换色 利用这个就能在网页中实现了js 隔行换色
用js制作隔行换色
BANaanaa的博客
12-02 320
用js制作隔行换色
js隔行变色
Boke_的博客
06-21 539
document.write("") for(var i=0;i if(i%2){ document.write("") }else{ document.write("") } for(var a=0;a document.write("第"+i+"行第"+a+"列") } document.write("") } document.write("")
用js实现隔行变色的效果
HUMHSX的专栏
02-27 2132
用js实现的各行变色的效果 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档    function  getTr(){   //获取所有的行数   var trs=document.getElementsByTagName("tr"
js隔行换色
asd_160529的博客
07-19 546
js实现隔行换色
js实现隔行变色
floraruo的博客
12-05 330
<script type="text/javascript"> var item = document.getElementById("infotable"); var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素 var trs = tbody.getEl...
用js完成隔行换色
weixin_46381608的博客
07-16 622
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> /*下面是匿名加载事件*/ //如果不是匿名的话就要在body中定义一个函数 window.onload = function() { var tbele = document.getElemen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值