怎么只让li元素隔行变色呢？

本帖最后由 cxvddd4 于 2011-05-08 15:04:00 编辑

解决方案 »

  1.   


    <script language="javascript">
    window.onload = function(){
    var oTable = document.getElementById("oTable");
    for(var i=0;i<oTable.getElementsByTagName("li").length;i++){
    if(i%2==0) //偶数行时
    oTable.getElementsByTagName("li")[i].className = "altrow";
    }
    }
    </script>
      

  2.   

    在帮看下这里哪里错了呢？
    <script language="javascript">
    window.onload = function(){
    var oTable = document.getElementById("oTable").getElementsByTagName("li").length;
    alert(oTable);
    for(var i=0;i<oTable;i++){
    if(i%2==0) //偶数行时
    oTable[i].className = "altrow";
    }
    }
    </script>
      

  3.   

    oTable是成了他的length 。
    这样吧 。<script language="javascript">
    window.onload = function(){
    var lis = document.getElementById("oTable").getElementsByTagName("li");
    alert(lis.length);
    for(var i=0;i<lis.length;i++){
    if(i%2==0) //偶数行时
    lis[i].className = "altrow";
    }
    }
    </script>你可以用firefox 看下你js哪里错了 。
      

  4.   

    这样写才是真正的隔行的li
    <script language="javascript">
    window.onload = function(){
    var oTable = document.getElementById("oTable").getElementsByTagName("li");
    for(var i=0;i<oTable.length;i++){
    if(i%2==0) //偶数行时
    oTable[i].className = "altrow";
    }
    }
    </script>
      

  5.   

    为什么要用window.onload呢？不用为什么没有效果呢？
    还有怎么让他改变加载顺序？
    这样图片加载出来了才变色，感觉不怎么好啊。
      

  6.   

    为什么要用window.onload呢？不用为什么没有效果呢？
    还有怎么让他改变加载顺序？
    这样图片加载出来了才变色，感觉不怎么好啊。
      

  7.   

    window.onload()页面元素加载完后执行的函数 。
    你把它去掉的话 。在执行这段脚本的时候 ，元素还没有加载 。
    所以获取不到 。
      

  8.   

    我想加载到DIV元素那就执行，下面哪里错了呢？
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>JavaScript实现隔行变色的表格</title>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>JavaScript实现隔行变色的表格</title>
    <style>
    <!--
    .datalist{
    border:1px solid #007108; /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse; /* 边框重叠 */
    background-color:#d9ffdc; /* 表格背景色 */
    font-size:14px;
    }
    .datalist td{
    border:1px solid #007108; /* 单元格边框 */
    text-align:left;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
    }
    .datalist .altrow{
    background-color:#0033FF; /* 隔行变色 */
    }
    #oTable div{
    height: 25px;
    }
    -->
    </style><script language="javascript">
    function mmg(){
    var oTable = document.getElementById("oTable").getElementsByTagName("li");
    for(var i=0;i<oTable.length;i++){
    if(i%2==0) //偶数行时
    oTable[i].className = "altrow";
    }
    }
    </script></head>
    <body> 
    <ul class="datalist" summary="list of members in EE Studay" id="oTable">
    <LI>4</LI>
    <LI>5</LI>
    <LI>6</LI>
    <LI>2</LI>
    <LI>5</LI>
    <a>dsf</a>
    <LI>g</LI>
    <dd>26236</dd>
    <LI>3</LI>
    <LI>f</LI>
    <LI>d</LI>
    <LI >g</LI>
    </ul>
    <div onload="nng();"></div></body>
    </html>
      

  9.   

    还有我把window.onload()去掉在把他JS放在</body>之后为什么也不执行呢？
    按顺序的话不是已经加载完成了吗？
      

  10.   

    <body> 
    <ul class="datalist" summary="list of members in EE Studay" id="oTable">
    <LI>4</LI>
    <LI>5</LI>
    <LI>6</LI>
    <LI>2</LI>
    <LI>5</LI>
    <a>dsf</a>
    <LI>g</LI>
    <dd>26236</dd>
    <LI>3</LI>
    <LI>f</LI>
    <LI>d</LI>
    <LI >g</LI>
    </ul>
    <script>
    mmg();
    </script>
    </body>
    这样就行了 。
      

  11.   

    怎么不行呢？
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>JavaScript实现隔行变色的表格</title>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>JavaScript实现隔行变色的表格</title>
    <style>
    <!--
    .datalist{
    border:1px solid #007108; /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse; /* 边框重叠 */
    background-color:#d9ffdc; /* 表格背景色 */
    font-size:14px;
    }
    .datalist td{
    border:1px solid #007108; /* 单元格边框 */
    text-align:left;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
    }
    .datalist .altrow{
    background-color:#0033FF; /* 隔行变色 */
    }
    #oTable div{
    height: 25px;
    }
    -->
    </style><script language="javascript">
    function nng(){
    var oTable = document.getElementById("oTable").getElementsByTagName("li");
    for(var i=0;i<oTable.length;i++){
    if(i%2==0) //偶数行时
    oTable[i].className = "altrow";
    }
    }
    </script></head>
    <body>  
    <ul class="datalist" summary="list of members in EE Studay" id="oTable">
    <LI>4</LI>
    <LI>5</LI>
    <LI>6</LI>
    <LI>2</LI>
    <LI>5</LI>
    <a>dsf</a>
    <LI>g</LI>
    <dd>26236</dd>
    <LI>3</LI>
    <LI>f</LI>
    <LI>d</LI>
    <LI >g</LI>
    </ul>
    </body>
    <script> onload="nng();"></script>
    </html>
      

  12.   

    <script>
    mmg();
    </script>
    你想加哪就在哪 。
    注意下元素是否生成就可以了  。
      

  13.   

    我想去掉script 直接在最后的li元素里调用mmg()可以不？
      

  14.   

    li的onload()?
    估计不行 。没这么试过 ~~
      

  15.   

    http://hi.baidu.com/jctr/blog/item/f6169f225a9bb8f2d7cae2bf.html
      

  16.   

    <script language="javascript">
    function color(){
    var oTable = document.getElementById("oTable").getElementsByTagName("li");
    for(var i=0;i<oTable.length;i++){
    if(i%2==0) //偶数行时
    oTable[i].className = "altrow";
    }
    }
    </script><ul class="datalist" summary="list of members in EE Studay" id="oTable">
    <LI>4</LI>
    <LI>5</LI>
    <LI>6</LI>
    <LI>2</LI>
    <LI>5</LI>
    <a>dsf</a>
    <LI>g</LI>
    <dd>26236</dd>
    <LI>3</LI>
    <LI>f</LI>
    <span>46346</span>
    <LI>d</LI>
    <LI>g</LI>
    </ul>
    <script>
    color()
    </script>
    放在后面就可以了