后退 刷新 前进 收藏 顶部 |   知道 黑匣子 富媒体 技术服务

小试牛刀,JQUERY 实现table奇偶数变色

程序猿 JS JQUERY table 奇偶数变色... (shuke.2013-12-09 09:37)
一个简单的jQuery 选择器
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQUERY 实现table奇偶数变色</title>
<!--只要把第7到13行代码放到网页里,所有CLASS命名为shuke的表格都被隔行换色;表格行的奇偶数不同,效果也不一样。-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".shuke td:even").css("background-color","#B2E0FF");
$(".shuke tr:even").css("color","green");
});
</script>
<!--复制 -->
</head>

<body>
<!--注意要命名 class="shuke"-->
<table border="1" cellspacing="0" class="shuke" >
<tr>
<th>Id</th>
<th>LastName</th>

<th>FirstName</th>
<th>Address</th>
<th>City</th>
<th>City</th>
</tr>

<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>
<td>Oxford Street</td>

<td>London</td>
</tr>

<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>

</table>

进度:100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

图片新热点

导航


目录


    站内搜索
    首页 | W3C | ME