zoukankan      html  css  js  c++  java
  • <javascript学习笔记>javascript 实现隔行变色

    <script type="text/javascript">
    window.onload = function()//javascript 实现隔行变色
    {

    var myCaption = document.getElementsByTagName('caption')[0];
    myCaption.style.backgroundColor = "red";
    var myTable = document.getElementById("myTable");
    myTable.style.border = "solid"
    //alert(typeof myTable);
    var myTrs = myTable.getElementsByTagName('tr');
    //alert(myTrs.length);
    for(var i = 0; i<myTrs.length;i++)
    {
    if(i%2 == 0)
    {
    myTrs[i].style.backgroundColor ="pink";
    }else
    {
    myTrs[i].style.backgroundColor ="white";
    }
    }

    }

    </script>
    </head>
    <body>
    <table id="myTable" align="center" style="80%">
    <caption>javascript 实现隔行变色</caption>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    <tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
    </table>
    </body>
    </html>
  • 相关阅读:
    JournalNode的作用
    mysql57重新安装后无法再次启动mysql57服务“本地计算机上的MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动。”--解决方法
    oracle基础语法
    MYSQL 8.0.11 安装过程及 Navicat 链接时遇到的问题
    MySQL 字符串函数:字符串截取
    java基础总结
    mysql 排名
    mysql——查询重复数据,及删除重复数据只保留一条数据
    松软科技课堂:jQuery 效果
    松软科技课堂:jQuery 效果
  • 原文地址:https://www.cnblogs.com/keygle/p/2271687.html
Copyright © 2011-2022 走看看