编码题目一：能够根据要求使用javascript实现页面效果

最新推荐文章于 2023-07-17 17:08:20 发布

会点魔法呀

最新推荐文章于 2023-07-17 17:08:20 发布

阅读量94

点赞数

分类专栏： HTML、js、css 文章标签： javascript html 前端 css

本文链接：https://blog.csdn.net/whyszan/article/details/130269815

版权

HTML、js、css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章描述了如何使用JavaScript实现HTML表格中数据行的隔行换色功能。通过获取所有`tr`元素并遍历，对奇数行和偶数行分别设置不同的背景颜色，达到视觉上的区分效果。示例代码展示了具体的实现方法。

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

需求描述：

素材中提供了如下图所示的页面效果
请添加图片描述
请在页面的 script 标签中实现数据行的隔行换色功能，成品效果如下图所示
要求：

奇数行背景颜色设置为： #e9edf2
偶数行背景颜色设置为：#fbfbfb

提示：

设置背景色的css属性是 backgroundColor
获取所有的 tr 标签元素，遍历并判断是否是偶数行，如果是设置 backgroundColor=#fbfbfb ，如果不是设置 backgroundColor=#e9edf2

实现思路：

根据 tr 标签名获取所有的元素对象，返回数组
从索引1开始遍历数组，获取数组中的每一个元素，判断索引是否是偶数
1. 是：将该元素的 backgroundColor 样式设置为 #fbfbfb
2. 不是：将该元素的 backgroundColor 样式设置为 #e9edf2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <style>
        table {
            width: 50%;
        }
        th,td {
        border-bottom: 1px #C0C0C0 solid;
        height: 40px;
        font-family: 楷体;
    }

    a {
        color: #00008B;
        text-decoration: none;
    }

    th {
        background-color: #DEE3E6;
    }

</style>
</head>
<body>
<table align="center">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>张三</td>
        <td>西安</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr align="center">
        <td>2</td>
        <td>李四</td>
        <td>武汉</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr align="center">
        <td>3</td>
        <td>王五</td>
        <td>北京</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr align="center">
        <td>4</td>
        <td>赵六</td>
        <td>上海</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr align="center">
        <td>5</td>
        <td>田七</td>
        <td>深圳</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr align="center">
        <td>6</td>
        <td>老王</td>
        <td>成都</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
</table>

<script>
    /*
        数据行进行各行换色
            奇数行颜色为 ： #fbfbfb
            偶数行的颜色为： #e9edf2
     */

    var trs= document.getElementsByTagName("tr")
    for (let i = 1; i < trs.length; i++) {
        if(i%2==0){
            trs[i].style.backgroundColor="#e9edf2"
        }else{
            trs[i].style.backgroundColor="#fbfbfb"
        }