javascript隔行换色

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

拍打星星

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

阅读量475

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js隔行换色

本文链接：https://blog.youkuaiyun.com/qq_33162543/article/details/50367614

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页表格行背景颜色交替显示的方法。通过为不同行设置不同的背景颜色，使得表格数据更加清晰易读。文章提供了一个简单的HTML页面示例，展示了如何利用JavaScript遍历表格的每一行，并根据行号的奇偶性应用不同的背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    window.onload=function(){
        var tablename=document.getElementById("mytable");
        var li=tablename.getElementsByTagName("tr");
        for(var i=0;i<=li.length;i++){
            if (i%2==0) {
                li[i].style.backgroundColor="#FFB584";
            }else{
                li[i].style.backgroundColor="#FFFFFF";
            }            
        }
    }
</script>
</head>        
<body>
<table id="mytable" width="300" border="1" cellpadding="0" cellspacing="0">
<!--cellpadding 是边框与其内容的间隙大小,cellspacing 是边框与边框之间的间隙大小-->
    <tr>
        <td>111111</td>
        <td>111111</td>
        <td>111111</td>
    </tr>
    <tr>
        <td>222222</td>
        <td>222222</td>
        <td>222222</td>
    </tr>
    <tr>
        <td>333333</td>
        <td>333333</td>
        <td>333333</td>
    </tr>
</table>
</body>
</html>