锋利Jquery 第三天 --- jquery 和 javascript 隔行换色的对比
3.1 jquery 和 javascript 隔行换色的对比
<html>
<head>
<title>jquery 选择器（隔行换色）</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#td tbody tr:even").css("backgroundColor","#888");
//通过id为td找出table, tbody 元素下 , tr 元素。并用even偶数匹配符，去找tr下面偶数行。最后用.css方法给偶数行加颜色。
// :even 匹配所有索引值为偶数的元素，从 0 开始计数;
// :odd 匹配所有索引值为奇数的元素，从 0 开始计数
});
</script>
</head>
<body>
<table id="td">
<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>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
<!-- <script type='text/javascript'>
var tb_itmes = document.getElementById("td");//获取table id为td 的表格元素
var tbody = tb_itmes.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody 元素
//在tbody 元素下 去 tr 元素
var tr = tbody.getElementsByTagName("tr");
//循环获取tr元素
for(var i=0; i< tr.length;i++){
//对tr 元素的索引取模
if(i%2==0){
tr[i].style.backgroundColor = "red"; //给符合条件的tr元素设置背景色
}
}
</script> -->
</body>
</html>
浙公网安备 33010602011771号