表格隔行变色

最新推荐文章于 2022-09-19 19:40:07 发布

hxyfdsal

最新推荐文章于 2022-09-19 19:40:07 发布

阅读量292

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/fdsal/article/details/108954636

版权

本文介绍如何利用JavaScript动态实现HTML表格的隔行变色效果，通过遍历表格行并设置不同的背景色，使得表格数据更易读。

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

表格隔行变色

在这里插入图片描述

<!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>
        * {
   
            margin: 0;
            padding: 0;
        }

        table {
   
            width: 80%;
            text-align: center;
            margin: 50px auto;
            border: 1px solid #eee;
            border-collapse: collapse;
        }

        th,
        td {
   
            border: 1px solid #eee;
            padding: 15px;
        }
        .odd{
   
            background-color: lightblue;
        }
        .even{
   
            background-color: lightgrey;