`
schy_hqh
  • 浏览: 543676 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

按一定间隔控制行的底色

 
阅读更多

表格，间隔一定行显示一种底色

使用jQuery实现

 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<script src="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	table {
	border-collapse:collapse;  
	border-spacing:0;
	}
</style>
<script type="text/javascript">

	$(document).ready(function(){
			var len = $("tr").parent().find("tr").length;
			for(var i=0;i<len;i++)
				if(i%10<5) {
					$("tr:eq("+i+")").css("background","darkcyan");
				}
		})
	</script>
</head>

<body>
<table>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td>
	</tr>

</table>
</body>
</html>

 

分享到：
| Play 学习中遇到的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics