js和jQuery实现表格隔行换色jquery
js和jQuery实现表格隔行换色...
昨天学了一下JavaScript，今天看了一下jQuery，感受到了jQuery的强大。下面分别时使用JS和jQuery实现表格隔行换色功能。
效果：
JavaScript实现表格隔行换色：
<!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>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<body>
<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:#ddd}
</style>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<!-- 奇数行 -->
<tr>
<td>1001</td><td>Mark</td><td>Man</td><td>990</td>
</tr>
<!-- 偶数行 -->
<tr>
<td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
</tr>
<tr>
<td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
</tr>
<tbody>
</table>
<script type="text/javascript">
window.onload=function(){
var a=document.getElementById('tbStu');
for(var i=0;i<a.rows.length-1;i++){
if(i%2==0){
a.rows[i].className='trOdd';
}
}
}
</script>
</body>
</html>jQuery实现表格隔行换色：
<!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>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<body>
<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:#ddd}
</style>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<!-- 奇数行 -->
<tr>
<td>1001</td><td>Mark</td><td>Man</td><td>990</td>
</tr>
<!-- 偶数行 -->
<tr>
<td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
</tr>
<tr>
<td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
</tr>
<tbody>
</table>
<script type="text/javascript">
$(function(){
$("#tbStu tr:nth-child(even)").addClass('trOdd');
});
</script>
</body>
</html>
最新评论
热门推荐
我要评论