JS实现隔行换色

最新推荐文章于 2023-11-19 11:09:06 发布
最新推荐文章于 2023-11-19 11:09:06 发布
阅读量642 收藏
点赞数
分类专栏： web前端，ES5 文章标签： javascript 实例 dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38384536/article/details/73718166
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
table{ width:500px;}
table,th,td{ border:1px solid #ccc; border-collapse:collapse;}
th,td{ height:30px; padding:0 5px}
.tr_even_bg{ background:#efefef;}
.over{ background:#ccc;}
</style>
<script>
window.οnlοad=dom_onload;




function dom_onload(){
var oTbody=document.getElementsByTagName('tbody')[0];
var aTr=oTbody.children;

//----------------------------------------
for(var i=0; i<aTr.length; i++){
if(i%3==2){ //这里实现隔两行换色，所以取模运算 i%3==2；
aTr[i].className="tr_even_bg";
};



aTr[i].οnmοuseοver=function(){
if(this.className=="tr_even_bg"){
this.className="tr_even_bg over";
}else{
this.className="over";
}
};


aTr[i].οnmοuseοut=function(){
if(this.className=="tr_even_bg over"){
this.className="tr_even_bg";
}else{
this.className="";
}
}

}





}


</script>
</head>


<body>
<table id="table01">
<thead>
    <tr>
        <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>学历</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>大专</td>
        </tr>
        <tr>
        <td>李四</td>
            <td>男</td>
            <td>20</td>
            <td>中专</td>
        </tr>
        <tr>
        <td>小明</td>
            <td>男</td>
            <td>29</td>
            <td>硕士</td>
        </tr>
        <tr>
        <td>小红</td>
            <td>女</td>
            <td>24</td>
            <td>本科</td>
        </tr>
        <tr>
        <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>大专</td>
        </tr>
        <tr>
        <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>大专</td>
        </tr>
        <tr>
        <td>李四</td>
            <td>男</td>
            <td>20</td>
            <td>中专</td>
        </tr>
        <tr>
        <td>小明</td>
            <td>男</td>
            <td>29</td>
            <td>硕士</td>
        </tr>
        <tr>
        <td>小红</td>
            <td>女</td>
            <td>24</td>
            <td>本科</td>
        </tr>
        <tr>
        <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>大专</td>
        </tr>
    </tbody>
</table>
</body>

</html>

图一隔两行换色


图二为鼠标经过时高亮


码农的N次方
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生javascript实现隔行换色
10-24
主要介绍了原生javascript实现隔行换色,需要的朋友可以参考下
JS之隔行变色
小书包的博客
01-09 862
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
【JS】原生 js 监测 某个 DOM进入 可视区
呆呆狗
07-16 471
就是 这个 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实现隔行换色
最新发布
xiaohua0708day的博客
11-19 389
2.获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。6.设置背景颜色(.style.backgroundColor)第一步：确定事件(onload)并为其绑定一个函数。5.获取奇数行和偶数行(对遍历中角标对2取余)第五步：获取奇数行和偶数行(角标对2取余)1.确定事件(页面加载事件onload)第六步：分别对奇数行和偶数行设置背景颜色。第四步：对tbody里面的行进行遍历。4.JS的遍历(for循环)第二步：书写函数(获取表格)
JS 隔行换色
温柔归故里
03-18 540
JS 隔行换色
财经类的表格变色写法 几行代码搞定 简单易懂
SanRenKing的博客
11-27 187
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
JS实现隔行换色的表格排序
10-20
本篇文章主要介绍了JS实现隔行换色的表格排序的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
基于JavaScript实现表格隔行换色
10-15
主要介绍了基于JavaScript实现表格隔行换色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Javascript知识【案例：表格隔行换色】
若有所执，必有所成，心之所向，必显光芒
08-07 2574
案例：表格隔行换色
js实现表格隔行换色
SqlloveSyn的博客
12-27 856
js实现表格隔行换色
纯js实现隔行变色效果
01-19
本文实例为大家分享了js实现隔行变色的具体代码，供大家参考，具体内容如下 [removed] function createTable(){ //创建表格 var table = document.createElement(table); //设置表格的行数 for(var i=0;i<4;i++){ var tr = document.createElement(tr); //设置表格的列数 for( var j=0;j<5;j++){ var td = document.createElem
JS与jQuery实现隔行变色的方法
10-21
主要介绍了JS与jQuery实现隔行变色的方法,结合实例形式对比分析了javascript与jQuery实现隔行变色的具体操作步骤与相关技巧,体验一下jQuery的华丽与简洁,需要的朋友可以参考下
js实现隔行变色操作鼠标经过效果
03-24
NULL 博文链接：https://yuxingxing1988.iteye.com/blog/1099511
js隔行换色
asd_160529的博客
07-19 470
js实现隔行换色
JavaScript制作表格隔行变色效果（新浪微博中的应用）
weixin_51415327的博客
09-02 419
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
表格隔行变色2020/11/21
weixin_50286102的博客
11-21 594
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实现隔行变色
热门推荐
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实现鼠标悬停图片显示文字效果
qq_38384536的博客
06-15 7337
无标题文档 *{ margin:0; padding:0} .box{ height:260px; width:400px; position:relative} .mask{ position:absolute; height:100%; width:100%; top:0; left:0; background:#000; opacity:.3; display:none} .su
javascript 表哥隔行换色
03-09
好的，我可以回答这个问题。在 HTML 中，可以使用 JavaScript 来实现表格隔行换色的效果...具体实现方法是通过 JavaScript 获取表格中的所有行，然后使用循环语句来判断行的奇偶性，再通过修改行的样式来实现隔行换色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值