隔行变色（ 表格隔行变色 + LI 浮动隔行变色 ）

第一篇文章哈  随便写写表格隔行变色，一个很普通的js效果...  但是我非常不喜欢用table，一是代码累赘，再是...我通常用li写信息列表。例如相册列表，通常是用浮动排版，或者block-inline...一行有好几个li元素这时要隔行变色的话...首先假如总共有7个li，一行有3个li，那最后一行就只有一个li，如果要隔行变色的话，最后一行自然得添加2个li并给上背景...

/* parentNodeId   父元素 nodeName       子元素nodeName VerticalNum    一行有几个nodeName的元素 color          颜色 startRow       开始的设置背景行数 1 or 2 */ function rowBj(parentNodeId,nodeName,VerticalNum,color,startRow){     var parentNode=document.getElementById(parentNodeId);     var allNode=parentNode.getElementsByTagName(nodeName);      if(startRow!=1&&startRow!=2){startRow=1}      var k=(allNode.length)/VerticalNum;     while(Math.floor(k)!=k){         var newNode=document.createElement(nodeName);         parentNode.appendChild(newNode);         allNode=parentNode.getElementsByTagName(nodeName);         k=(allNode.length)/VerticalNum;     }      for (var i=0;i<allNode.length;i++){         var hangshu=Math.floor((i+VerticalNum)/VerticalNum);         var num=hangshu/2;         if(startRow==2&&num==Math.floor(num)){allNode[i].style.background=color}         else if(startRow==1&&num!=Math.floor(num)){allNode[i].style.background=color}         else{allNode[i].style.background=''}     }      }

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

-------------------------------------------------------------

@Canrz 说的CSS方式 我还真没用过 学习了也贴出示例[ie8-  不支持  

css 隔行换色：    nth-of-type / nth-child odd（单） even（双）

<style>#qita_3{width:800px;overflow:hidden;padding:10px;background:#666;}#qita_3 li{height:30px;background:#999;margin:6px 0;}#qita_3 li:nth-child(odd){background:#999;}#qita_3 li:nth-child(even){background:#c99;}#qita_4{width:800px;overflow:hidden;padding:10px;background:#666;}#qita_4 li{width:190px;height:30px;float:left;margin:6px 5px;background:#999;}#qita_4 li:nth-child(8n+0),#qita_4 li:nth-child(8n-1),#qita_4 li:nth-of-type(8n-2),#qita_4 li:nth-of-type(8n-3){background:#c99;}</style><ul id="qita_3"><li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li></ul><ul id="qita_4"><li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li><li>list 5</li><li>list 6</li><li>list 7</li><li>list 8</li><li>list 9</li><li>list 10</li><li>list 11</li><li>list 12</li><li>list 13</li><li>list 14</li><li>list 15</li></ul>

demo