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>
  • 相关阅读:
    50 +漂亮的网站的配色方案(下)
    分享一款jQuery的UI插件:Ninja UI
    让代码飞一会儿:快速编写 HTML 和 CSS 的工具和技术
    30 +最佳移动网络设计灵感的案例
    50 +漂亮的网站的配色方案(上)
    20+ 个很棒的 jQuery 文件上传插件或教程
    23个全屏照片为背景的网站
    20个值得开发人员关注的jQuery技术网站和博客
    20张图,让你看清2012移动互联网大方向
    7 款仿照 Sinatra 思路的 .NET 框架
  • 原文地址:https://www.cnblogs.com/keygle/p/2271687.html
Copyright © 2011-2022 走看看