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