JavaScript小案例——表格隔行变色效果

最新推荐文章于 2023-07-12 17:26:44 发布

momo不吃辣

最新推荐文章于 2023-07-12 17:26:44 发布

阅读量914

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_54645034/article/details/127143235

版权

本文介绍如何使用JavaScript创建一个表格，当鼠标移到表格某行时，该行变色。涉及鼠标事件onmouseover和onmouseout，通过遍历tbody中的行并添加事件监听器来实现效果，有助于提升表格的视觉体验。

摘要由CSDN通过智能技术生成

题目：

制作一个表格，当鼠标移动到表格的某一行时，那一行表格变色达到注目效果。

案例分析：

用到新的鼠标事件鼠标经过事件：onmouseover鼠标离开：onmouseout；
核心思路：鼠标经历tr行，当前的行数背景颜色，鼠标离开去掉当前的背景颜色；
注意：第一行（thead里面的行）不需要换颜色，因此我妈获取的时tbody里面的行。

1.先建表格

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>增长率</th>
            </tr>
        </thead>
            <tbody>
                <tr>
                    <td>003526</td>
                    <td>3个月定期开发债券</td>
                    <td>1.075</td>
                    <td>1.096</td>
                    <td>1.074</td>
                    <td>+0.047%</td>
                </tr>
            
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>