利用JS实现表格的隔行变色效果

我就是我 2023-07-03 03:18 47阅读 0赞

在开发中我们经常会看见表格隔行变色的案例  
为了在看表格里面的数据不小心看错行数,所以就有了这样的效果  
成果图![在这里插入图片描述][20200201141718283.gif]  
html和css代码

<style>
            table{ 
                width: 500px;
                margin: 100px auto;
                padding: 0;
            }
            thead{ 
                text-align: center;
                background-color:cornflowerblue;
            }
            td{ 
                border-bottom: 1px solid #ccc;
            }
            .bg{ 
                background-color: powderblue;
            }
        </style>
    
    ------html-----
    <table>
            <thead>
            <tr><td>这是表头</td></tr>
            </thead> 
            <tbody> 
                <tr><td>第1行</td></tr>
                <tr><td>第2行</td></tr>
                <tr><td>第3行</td></tr>
                <tr><td>第4行</td></tr>
                <tr><td>第5行</td></tr>
            </tbody>  
        </table>

<script>
            // 获取所有行
            var hang = document.querySelector("tbody").querySelectorAll("tr");
            //注册事件
            // 遍历每行,给每一行都绑定
            for(var i=0; i<hang.length; i++){ 
                // 鼠标经过事件
                hang[i].onmouseover = function(){ 
                    this.className = "bg";
                }
                //鼠标离开事件
                hang[i].onmouseout = function(){ 
                    this.className = "";
                }
            }
        </script>

这个案例在开发中经常会用到.希望大家喜欢.

[20200201141718283.gif]: https://img-blog.csdnimg.cn/20200201141718283.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关 onmouseover+onmouseout ：表格隔行变色

表格隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset

灰太狼/ 2023年10月03日 14:50/ 0 赞/ 125 阅读

相关利用JS实现表格的隔行变色效果

在开发中我们经常会看见表格隔行变色的案例为了在看表格里面的数据不小心看错行数,所以就有了这样的效果成果图![在这里插入图片描述][20200201141718283

我就是我/ 2023年07月03日 03:18/ 0 赞/ 48 阅读

相关 jquery_demo 表格隔行变色案例

jquery\_demo 表格隔行变色案例 ![在这里插入图片描述][20200626224023105.png] <!DOCTYPE html> <h

男娘i/ 2023年02月20日 12:21/ 0 赞/ 64 阅读

相关 table表格，隔行，格列变色

隔行变色每隔奇数行变色一次 tr:nth-child(odd) { background-color: eee; } ![在这里插

﹏ヽ暗。殇╰゛Y/ 2023年01月19日 03:11/ 0 赞/ 114 阅读

相关 4.JavaScript实现表格隔行变色

css代码如下： <style> { margin: 0; padding: 0;

﹏ヽ暗。殇╰゛Y/ 2022年12月12日 04:38/ 0 赞/ 246 阅读

相关 js 实现隔行变色

![效果图][SouthEast] -------------------- <!DOCTYPE html> <html lang="en"> <h

向右看齐/ 2022年06月17日 23:08/ 0 赞/ 285 阅读

相关自定义行列数的隔行变色表格效果

这种效果用处不大，但是可以作为练习双层for循环和document.write()的工具．思路如下：把<table></table>,<tr></tr>,<td></td>

以你之姓@/ 2022年05月22日 12:17/ 0 赞/ 271 阅读

相关 jquery表格隔行变色

结果如下图: ![这里写图片描述][70] <!doctype html> <html> <head> <meta http-eq

客官°小女子只卖身不卖艺/ 2022年05月21日 02:38/ 0 赞/ 348 阅读

相关 jQuery表格之隔行变色

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

清疚/ 2021年12月10日 00:49/ 0 赞/ 434 阅读

相关利用js实现表格隔行换色效果

利用js实现表格隔行换色效果首先我们来看一下实现的效果，如下图所示：思路：确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:...

小灰灰/ 2020年06月03日 12:45/ 0 赞/ 828 阅读