JS实现隔行换色

最新推荐文章于 2024-04-14 08:44:26 发布
最新推荐文章于 2024-04-14 08:44:26 发布
阅读量680 收藏
点赞数
分类专栏： 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次方
关注
专栏目录
js 隔行换色
01-09
js 隔行换色 利用这个就能在网页中实现了js 隔行换色
js隔行换色
asd_160529的博客
07-19 522
js实现隔行换色
用js完成隔行换色
weixin_46381608的博客
07-16 607
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> /*下面是匿名加载事件*/ //如果不是匿名的话就要在body中定义一个函数 window.onload = function() { var tbele = document.getElemen
财经类的表格变色写法 几行代码搞定 简单易懂
SanRenKing的博客
11-27 223
<!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之隔行换色
最新发布
weixin_58462329的博客
04-14 791
大家可以看一下，我把具体解释都写在代码里面的注释上面了，不会的看下注释哦。接下来就在js里面写时间了，先写点击增加按钮执行的操作。大家好，今天来学习的是增加表单并且使他们每隔一行变色。如上图所示，这就是我们今天需要完成的效果。我们先写一个表格并且修改一下他们的样式。先让大家看下下效果图。
原生javascript实现隔行换色
10-24
总的来说，原生JavaScript实现隔行换色的关键在于理解DOM操作、条件语句以及事件处理。通过这种方式，我们可以为网页增加交互性和美观性，提升用户体验。同时，这也是一种很好的实践JavaScript基本技巧的机会，包括...
JS实现隔行换色的表格排序
10-20
在本文中，我们将探讨如何使用JavaScript实现一个功能丰富的表格，包括隔行换色和排序功能。首先，让我们逐个解析这个任务涉及的关键知识点。 1. **获取元素**：在JavaScript中，我们可以使用不同的方法来获取页面...
javascript 隔行换色函数代码
10-28
这种效果在JavaScript中可以很容易实现，而不需要依赖CSS样式，利用JavaScript动态地给元素添加类名来改变背景色，从而实现隔行换色的效果。 在上述的代码片段中，我们首先定义了一个函数changeRowsBg，这个函数的...
JS 隔行换色
温柔归故里
03-18 628
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
JavaScript隔行换色
03-11
用JavaScript实现换一行一种颜色
javascript隔行换色
专业copy各种代码
12-21 450
无标题文档 window.onload=function(){ var tablename=document.getElementById("mytable"); var li=tablename.getElementsByTagName("tr"); for(var i=0;i<=li.length;i++){ i
JS之隔行变色
小书包的博客
01-09 929
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
js实现隔行换色
taokai的专栏
01-22 1405
http://www.w3.org/TR/html4/strict.dtd">     js实现隔行换色---阿会楠练习作品（为我所写，非我所想）     window.onload = function(){    var tr_ = document.getElementById("myTable").getElementsByTagName("tr");    for(var i = 0;i
JavaScript制作表格隔行变色效果（新浪微博中的应用）
weixin_51415327的博客
09-02 483
<!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>..
JavaScript基础案例---隔行换色
阿木木的博客
07-23 272
隔行换色其实很简单，就是通过遍历出来的下标与2取模，下面我把代码贴出来供大家参考，不喜勿喷哈 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .show{ width: 800px; margin: 50px auto; } table{ border: 1px solid #ccc; width: 5
JS实现表格隔行换色与排序技术解析
以上就是使用JavaScript实现隔行换色和表格排序的基本步骤。在实际项目中，可能还需要考虑更多的细节，如兼容性、性能优化、用户交互等。但掌握了这些基础，就能有效地处理大部分表格相关的动态效果和功能需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值