现在的位置: 首页 > 综合 > 正文

jquery学习笔记1表格颜色交叉展示

2013年08月31日 ⁄ 综合 ⁄ 共 1008字 ⁄ 字号 评论关闭

单纯的使用js写起来会很麻烦,而且还要考虑兼容性的问题

好的学习方式是先学习js,再学习jquery

对于jquery来说啊,它一般具有两个功能,一个功能呢是读这个属性的值,另一个功能是写这个属性的值。

一个参数就是读操作,两个参数就是写操作。

对于你获取的每一个jquery对象来说,他都有一个length属性,表示对象的个数。

表格隔行交叉换颜色。

搭配颜色不是我的强项,我的强项是把他的颜色弄出来。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src=../js/jquery-1.9.1.min.js></script>
<script type="text/javascript">
	window.onload = function() {
		var Table = document.getElementById("table1");
		var Tbody = Table.getElementsByTagName("tbody")[0];
		var Trs = Tbody.getElementsByTagName("tr");
		for ( var i = 0; i < Trs.length; i++) {
			if(i%2==0){
				Trs[i].style.backgroundColor="#CAFF70";
			}else{
				Trs[i].style.backgroundColor="#E0FFFF";
			}
		}

	}
</script>
</head>
<body>
	<table id="table1" border="1" align="center" width="60%">
		<tbody>
			<tr>
				<td>王宏雷</td>
				<td>粗来玩</td>
				<td>信都科技</td>
				<td>人力资源</td>
			</tr>
			<tr>
				<td>王宏雷</td>
				<td>粗来玩</td>
				<td>信都科技</td>
				<td>人力资源</td>
			</tr>
			
		</tbody>
	</table>
</body>
</html>

抱歉!评论已关闭.