简明现代魔法 -> JQuery -> JQuery 学习:隔行变色

JQuery 学习:隔行变色

2010-07-17

实现步骤如下:

  • 根据表格的 id 获取表格。
  • 获取 tbody 元素。
  • 在 tbody 元素下获取 tr 元素。
  • 对 tr 组成的数组进行处理,就是用数组的索引值除以2取模,根据奇偶设置背景色。

效果演示

第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
第六行第六行

JavaScript Code

<script type="text/javascript">
window.onload = function(){ //页面所有元素加载完毕
	var item  =  document.getElementById("tb");			//获取id为tb的元素(table)
	var tbody =  item.getElementsByTagName("tbody")[0];	//获取表格的第一个tbody元素
	var trs =   tbody.getElementsByTagName("tr");	        //获取tbody元素下的所有tr元素
	for(var i=0;i < trs.length;i++){//循环tr元素
		if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
			trs[i].style.backgroundColor = "#fffacd"; // 改变 符合条件的tr元素 的背景色.
		}
	}
}
</script>

HTML Code

<table id="tb" width="500" border="none">
	<tbody>
		<tr><td>第一行</td><td>第一行</td></tr>
		<tr><td>第二行</td><td>第二行</td></tr>
		<tr><td>第三行</td><td>第三行</td></tr>
		<tr><td>第四行</td><td>第四行</td></tr>
		<tr><td>第五行</td><td>第五行</td></tr>
		<tr><td>第六行</td><td>第六行</td></tr>
	</tbody>
</table>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们