隔行变色

第一篇文章哈  随便写写

表格隔行变色，一个很普通的js效果...  
但是我非常不喜欢用table，一是代码累赘，再是...
我通常用li写信息列表。

例如相册列表，
通常是用浮动排版，或者block-inline...
一行有好几个li元素
这时要隔行变色的话...

首先假如总共有7个li，
一行有3个li，
那最后一行就只有一个li，
如果要隔行变色的话，
最后一行自然得添加2个li并给上背景...

为了美观，
本着尊重设计的原则，
于是写了个这个小函数...

 1 /*
 2 parentNodeId   父元素
 3 nodeName       子元素nodeName
 4 VerticalNum    一行有几个nodeName的元素
 5 color          颜色
 6 startRow       开始的设置背景行数 1 or 2
 7 */
 8 function rowBj(parentNodeId,nodeName,VerticalNum,color,startRow){
 9     var parentNode=document.getElementById(parentNodeId);
10     var allNode=parentNode.getElementsByTagName(nodeName);
11 
12     if(startRow!=1&&startRow!=2){startRow=1}
13 
14     var k=(allNode.length)/VerticalNum;
15     while(Math.floor(k)!=k){
16         var newNode=document.createElement(nodeName);
17         parentNode.appendChild(newNode);
18         allNode=parentNode.getElementsByTagName(nodeName);
19         k=(allNode.length)/VerticalNum;
20     }
21 
22     for (var i=0;i<allNode.length;i++){
23         var hangshu=Math.floor((i+VerticalNum)/VerticalNum);
24         var num=hangshu/2;
25         if(startRow==2&&num==Math.floor(num)){allNode[i].style.background=color}
26         else if(startRow==1&&num!=Math.floor(num)){allNode[i].style.background=color}
27         else{allNode[i].style.background=‘‘}
28     }
29     
30 }


调用
window.onload=function(){
    rowBj(‘qita‘,‘li‘,4,‘#c99‘,1);
    rowBj(‘qita_1‘,‘li‘,1,‘#c99‘,2);
    rowBj(‘qita_2‘,‘tr‘,1,‘#c99‘,2);
}