利用JQuery和JS实现奇偶行背景颜色自定义效果
更新时间:2012年11月19日 15:27:05 作者:
本文将详细介绍利用JQuery和JS实现奇偶行背景颜色自定义效果,需要的朋友可以参考下
JQuery实现:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
//可以是:$('#t1 tbody tr:even').css('background','red');
$('#t1 > tbody tr:even').css('background','red');
$('#t1 > tbody tr:odd').css('background','blue');
});
</script>
</head>
<body>
<table id="t1" width="500px" align="center">
<tbody>
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>
</body>
</html>
JS实现:
<span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript">
//页面加载事件
window.onload=function(){
//获取table
var tb1 = document.getElementById("t1");
//获取table中的tbody
var tbody = tb1.getElementsByTagName("tbody")[0];
//获取tr
var trs = tbody.getElementsByTagName("tr");
//根据奇、偶行显示不同的背景颜色
for(var i=0; i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}
}
</script>
</head>
<body>
<table id="t1" width="500px" align="center">
<tbody>
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>
</body>
</html>
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
//可以是:$('#t1 tbody tr:even').css('background','red');
$('#t1 > tbody tr:even').css('background','red');
$('#t1 > tbody tr:odd').css('background','blue');
});
</script>
</head>
<body>
<table id="t1" width="500px" align="center">
<tbody>
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>
</body>
</html>
JS实现:
复制代码 代码如下:
<span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript">
//页面加载事件
window.onload=function(){
//获取table
var tb1 = document.getElementById("t1");
//获取table中的tbody
var tbody = tb1.getElementsByTagName("tbody")[0];
//获取tr
var trs = tbody.getElementsByTagName("tr");
//根据奇、偶行显示不同的背景颜色
for(var i=0; i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}
}
</script>
</head>
<body>
<table id="t1" width="500px" align="center">
<tbody>
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>
</body>
</html>
相关文章
JavaScript中find()和 filter()方法的区别小结
js中find和filter方法大家在工作中会经常遇到,那么他们有什么区别呢?这篇文章主要给大家介绍了关于JavaScript中find()和 filter()方法区别的相关资料,需要的朋友可以参考下2021-12-12javascript学习笔记(七)利用javascript来创建和存储cookie
今天把javascript如何用来创建及存储cookie复习了一下,其中的一点体会拿出来和大家讨论,恳请高手指点一二。2011-04-04IE浏览器不支持getElementsByClassName的解决方法
这篇文章主要介绍了IE浏览器不支持getElementsByClassName的解决方法,本文的方法比较完美的解决了这个问题,需要的朋友可以参考下2014-08-08javascript移动设备Web开发中对touch事件的封装实例
这篇文章主要介绍了javascript移动设备Web开发中对touch事件的封装实例,分别对tap事件、doubleTap事件、longTap事件、swipe事件做了封装,需要的朋友可以参考下2014-06-06
最新评论