jQuery学习笔记(2)---表格隔行变色

一、源代码:

<!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>表格隔行变色</title>
<script language="javascript" src="../jquery-1.11.3.min.js"></script>
<script language="javascript">
	$(function(){
		//匹配所有索引值为偶数的元素,从 0 开始计数,查找表格的1、3、5...行(即索引值0、2、4...)
		$("tr:even").css("background","#F00");   //设置为红色
		//匹配所有索引值为偶奇数的元素,从 1 开始计数,查找表格的2、4、6行(即索引值1、3、5...)
		$("tr:odd").css("background","#0FF");   //设置为蓝色
	});
</script>
<style type="text/css">
	table{border-collapse:collapse;}
	td{border:1px solid;}
</style>
</head>

<body>
<center>
  <table>
    <tr>
      <td>cell A</td>
      <td>cell B</td>
      <td>cell C</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
    <tr>
      <td>cell a</td>
      <td>cell b</td>
      <td>cell c</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
  </table>
</center>
</body>
</html>



二、效果图:

jQuery学习笔记(2)---表格隔行变色_第1张图片


你可能感兴趣的:(JavaScript,html,jquery)