提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

利用JQuery和JS实现奇偶行背景颜色自定义效果

jQueryJS 实现 利用 自定义 效果 颜色 背景
2023-06-13 09:14:41 时间
JQuery实现:
复制代码代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>NewWebProject</title>
<scripttype="text/javascript"src="jquery-core/jquery-1.8.0.js"></script>
<scripttype="text/javascript">
$(function(){
//可以是:$("#t1tbodytr:even").css("background","red");
$("#t1>tbodytr:even").css("background","red");
$("#t1>tbodytr:odd").css("background","blue");
});
</script>
</head>


<body>
<tableid="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实现：
复制代码代码如下:

<spanstyle="color:#333333;"><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>NewWebProject</title>

<scripttype="text/javascript">
//页面加载事件
window.onload=function(){
//获取table
vartb1=document.getElementById("t1");
//获取table中的tbody
vartbody=tb1.getElementsByTagName("tbody")[0];
//获取tr
vartrs=tbody.getElementsByTagName("tr");
//根据奇、偶行显示不同的背景颜色
for(vari=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}
}
</script>
</head>

<body>
<tableid="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>

相关文章