使用jQuery实现隔行变色
2013-04-18 08:12
176 查看
<head>
<!--什么是选择器？
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。
选择器的优势？
与传统的JavaScript获取页面元素和便携食物相比，jQuery选择器具有明显的优势，具体表现在一下两个方面：
*代码更简单
*完善的检测机制
-->
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
#tbStu{width:260px;border:solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px;}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<!-- 使用javaScript实现隔行变色-->
<!--
<script type="text/javascript">
window.onload = function () {
var oTb = document.getElementById("tbStu");
for (var i = 0; i < oTb.rows.length - 1; i++) {
if (i % 2) {
oTb.rows[i].className = "trOdd";
}
}
}
</script>
-->
<!-- 使用jQuery选择器实现隔行变色-->
<script type="text/javascript">
$(function () {
$('#tbStu tr:nth-child(even)').addClass('trOdd');
})
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr><th>学号</th><th>姓名</th><th>性别</th><th>总分</th></tr>
<tr><td>001</td><td>张三</td><td>男</td><td>100</td></tr>
<tr><td>002</td><td>李四</td><td>女</td><td>100</td></tr>
<tr><td>003</td><td>王五</td><td>男</td><td>100</td></tr>
<tr><td>004</td><td>赵六</td><td>女</td><td>100</td></tr>
<tr><td>005</td><td>周七</td><td>男</td><td>100</td></tr>
<tr><td>006</td><td>王八</td><td>女</td><td>100</td></tr>
</tbody>
</table>
</body>
<!--什么是选择器？
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。
选择器的优势？
与传统的JavaScript获取页面元素和便携食物相比，jQuery选择器具有明显的优势，具体表现在一下两个方面：
*代码更简单
*完善的检测机制
-->
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
#tbStu{width:260px;border:solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px;}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<!-- 使用javaScript实现隔行变色-->
<!--
<script type="text/javascript">
window.onload = function () {
var oTb = document.getElementById("tbStu");
for (var i = 0; i < oTb.rows.length - 1; i++) {
if (i % 2) {
oTb.rows[i].className = "trOdd";
}
}
}
</script>
-->
<!-- 使用jQuery选择器实现隔行变色-->
<script type="text/javascript">
$(function () {
$('#tbStu tr:nth-child(even)').addClass('trOdd');
})
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr><th>学号</th><th>姓名</th><th>性别</th><th>总分</th></tr>
<tr><td>001</td><td>张三</td><td>男</td><td>100</td></tr>
<tr><td>002</td><td>李四</td><td>女</td><td>100</td></tr>
<tr><td>003</td><td>王五</td><td>男</td><td>100</td></tr>
<tr><td>004</td><td>赵六</td><td>女</td><td>100</td></tr>
<tr><td>005</td><td>周七</td><td>男</td><td>100</td></tr>
<tr><td>006</td><td>王八</td><td>女</td><td>100</td></tr>
</tbody>
</table>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用JavaScript和jQuery实现隔行变色 .
- 使用JQuery实现隔行变色的效果
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
- 使用原生js和jQuery实现表格的隔行变色
- 使用JQuery实现隔行变色
- 使用JavaScript和jQuery实现隔行变色
- jQuery实现隔行变色代码
- jQuery实现隔行背景色变色
- jquery实现隔行变色
- jquery入门—选择器实现隔行变色实例代码 (仅仅一行代码，实现隔行变色！)
- php简单分页 和 jquery实现超简单的隔行变色
- 用JQuery实现表格隔行变色和突出显示当前行的代码
- 利用jquery一句话实现隔行变色
- [原创]持续给力：jQuery实现表格隔行变色效果案例详解
- jquery实现表格的隔行变色
- smarty中使用实现隔行变色
- 使用简洁的jQuery方法实现隔行换色功能
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- 用jQuery实现表格的隔行变色
- 用JQuery实现表格隔行变色和突出显示当前行