<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="editplus" />
<title>使一个特定的表格隔行变色</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<!--<script type="text/javascript">(function () { alert("函数已被调用！"); })();</script>-->
<!--
思路：
1. 根据表格id获取表格。
2. 在表格内获取<tbody>元素。
3. 在<tbody>元素下获取<tr>元素。
4. 循环输出获取的<tr>元素。
5. 对<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。
-->
</head>
<body>
<table id="tb">
<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>
</tbody>
</table>
<script type="text/javascript">
//传统方法：
//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)
// {
// trs[i].style.backgroundColor = "#888"; //改变符合条件的tr元素的背景色
// }
//}
//jQuery方法：
$(‘#tb tbody tr:even‘).css("backgroundColor", "#888");
//获取id为tb的元素，然后寻找它下面的tbody标签，再寻找tbody下索引值是偶数的tr元素，改变它的背景色
//css("property","value");用来设置jQuery对象的样式
</script>
</body>
</html>
使一个特定的表格隔行变色(引自锋利的jQuery),布布扣,bubuko.com
时间： 2024-12-25 10:13:03