js实现表格隔行变色

最新推荐文章于 2024-03-27 23:32:32 发布
最新推荐文章于 2024-03-27 23:32:32 发布
阅读量494 收藏
点赞数 3
分类专栏： js 文章标签： js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zi_ran_meng/article/details/117038254
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        table{

            /* 宽度为600px */

            width: 600px ;

             /* 上下外边距100px， 左右自动居中 */

            margin: 50px auto;

              /* 文本居中 */

            text-align: center;

            /* 为表格设置合并边框模型： */

            border-collapse: collapse;

            /* 字体大小 */

            font-size: 14px;

        }

         thead tr{

                    /* 高度为30px */

             height: 30px;

             /* 背景颜色为： */

             background-color:skyblue;

 

         }

 

         tbody tr{

              /* 高度为30px */

             height: 30px;

         }

 

         tbody td {

             /* 下边框为：1px 实线 颜色 */

             border-bottom: 1px solid gray;

             /* 字体大小 */

             font-size: 12px;

             /* 字体颜色 */

             color: blue;

         }

 

         .bg{

                /* 背景颜色 */

             background-color: greenyellow;

         }

    </style>

</head>

<body>

    <!-- 表格由 <table> 标签来定义。

                每个表格均有若干行（由 <tr> 标签定义），

                     每行被分割为若干单元格（由 <td> 标签定义） -->

        <table>

            <thead>

                <!-- 表格的表头使用 <th> 标签进行定义。 -->

                    <tr>

                        <th>代码</th>

                        <th>名称</th>

                        <th>最新公布净值</th>

                        <th>累计净值</th>

                        <th>前单位净值</th>

                        <th>净值增长率</th>

                    </tr>

            </thead>

 

            <tbody>

                <tr>

                    <td>00001</td>

                    <td>诺安</td>

                    <td>1.075</td>

                    <td>1.079</td>

                    <td>1.114</td>

                    <td>+0.047%</td>

                </tr>

                <tr>

                    <td>00002</td>

                    <td>上证综指</td>

                    <td>1.066</td>

                    <td>-18.05</td>

                    <td>-0.51%</td>

                    <td>+0.011%</td>

                </tr>

                <tr>

                    <td>00003</td>

                    <td>中国长城</td>

                    <td>1.078</td>

                    <td>1.079</td>

                    <td>1.162</td>

                    <td>+0.055%</td>

                </tr>

                <tr>

                    <td>00004</td>

                    <td>格林美</td>

                    <td>1.044</td>

                    <td>1.079</td>

                    <td>1.176</td>

                    <td>+0.052%</td>

                </tr>

                <tr>

                    <td>00005</td>

                    <td>白酒</td>

                    <td>1.053</td>

                    <td>1.079</td>

                    <td>1.443</td>

                    <td>+0.039%</td>

                </tr>

                <tr>

                    <td>00006</td>

                    <td>比亚迪</td>

                    <td>1.155</td>

                    <td>1.079</td>

                    <td>1.764</td>

                    <td>+8.87%</td>

                </tr>

            </tbody>

 

            

                

        </table>


 

        <script>

            // 获取元素 获取的是tbody里面 所有的行

                var trs=document.querySelector('tbody').querySelectorAll('tr')

                // 利用循环绑定注册事件

              for( var i=0; i<trs.length; i++){

                //   鼠标经过事件   onmouseover

                    trs[i].οnmοuseοver=function(){

                        // console.log('抄家');

                        this.className='bg'

 

                    }

                //  鼠标离开事件   onmouseout

                trs[i].οnmοuseοut=function(){

                    // 让类名为空 实现离开没有的效果

                    this.className=''

                }

              }   

        </script>

 

</body>

</html>

自然萌emmm
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
利用html css javascript实现表格隔行变色效果
weiyuyang250的博客
10-11 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
JavaScript 实现表格隔行变色，前端工程师最容易遇到4个瓶颈是什么
最新发布
2401_84181125的博客
04-07 477
使用 HTML 方式查找元素首先在 HTML 界面添加样式.blue{编写JavaScript脚本文件// 查找所有的行，各行变色 假如偶数行变色// 查找 tbody 中所有的 tr，然后隔行变色。// 使用 HTML方式查找元素。i < len;i++) {使用选择器查找// 使用选择器查找i++) {案例完整代码HTML姓名工资入职时间操作Tom$35002015-8-20删除Jack$32002017-12-6删除。
JavaScript 实现表格隔行变色，前端开发入门与实战
m0_57540655的博客
03-27 647
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
js实现表格隔行变色效果
weixin_52065872的博客
04-28 1611
表格隔行变色
jquery实现表格隔行变色
LHH201016的博客
08-22 1863
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
实现 表格 隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
11-03 1278
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> <script src="../jquery.js"></script> <style> table{ width:100%; }
js实现表格隔行换色
SqlloveSyn的博客
12-27 987
js实现表格隔行换色
【Web前端】【JavaScript】实现表格隔行变色
萌狼蓝天の技术栈
12-30 1564
方法1：原生JavaScript 设置CSS table td{ border:red solid 1px; } .tr1{ color:white; background: black; } .tr2{ color:black; background: white; } .tr2:hover{ ...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
javascript实现table表格隔行变色的方法
10-24
主要介绍了javascript实现table表格隔行变色的方法,涉及javascript针对表格元素与样式的操作技巧,需要的朋友可以参考下
基于JavaScript实现表格隔行换色
10-15
为了解决这个问题，我们可以使用JavaScript来实现表格隔行换色的功能，从而提升用户的浏览体验。本文将详细介绍如何基于JavaScript实现这一功能。 首先，我们需要理解JavaScript中与表格相关的DOM对象和属性。在...
js函数求任意两数之间的和
zi_ran_meng的博客
05-26 1550
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
js超级简单计算数组的和以及平均值
zi_ran_meng的博客
05-23 1327
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
layui组件提交按钮重复出现两次
zi_ran_meng的博客
03-18 1130
去掉其中一个即可。
Node.js（面试真题）
zi_ran_meng的博客
07-27 1029
★★★ 如何使用原生 Node.js 操做 cookie？ ★★ 什么是 Node.js？我们在哪里使用它？ ★★ 为什么要使用 Node.js？ ★★★ Node.js 有哪些特点？ ★★★ setImmediate 和 setTimeOut 区别在哪里? ★★★ 如何更新 Node.js 的版本? ★★ 为什么 Node.js 是单线程的？ ★★ 什么是回调函数？ ★★★ 什么叫做回调地狱？ 如何阻止回调地狱？ ★★ Node.js 和 ajax 的区别是什么? ★★★ nextTi
js倒计时年月日时分秒
zi_ran_meng的博客
06-16 1000
js倒计时年月日时分秒
JavaScript面试真题(2)
zi_ran_meng的博客
07-23 907
51. ★★★ 如何判断一个对象是否为数组，函数 方法一： instanceof: var arr=[]; console.log(arr instanceof Array) //返回true 方法二： constructor: console.log(arr.constructor == Array); //返回true 方法三： Array.isArray() console.log(Array.isArray(arr)); //返回true 52. ★★★ 写一个函数，接受可变个数..
jquery表格隔行变色
01-04
以下是两种实现jQuery表格隔行变色的方法： 1. 使用each()方法遍历表格行，并根据索引值判断是否为偶数行，然后使用css()方法设置背景颜色。 ```javascript $(document).ready(function() { var table = $("#...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值