<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
<title>单双行显示不同的颜色</title>
<!--下面为javascript代码-->
<script type = "text/javascript">
window.onload = function color(){//窗口加载时调用
var table = document.getElementById("person");//根据table的 id 属性值获得对象
var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表
for(var i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3
}
else{
rows[i].style.backgroundColor = "White";//单数行时背景色为white
}
}
}
</script>
<!--下面为css代码-->
<style type = "text/css">
#person
{
border-style:1px solid;
border-color:blue;
font-weight:bold;
font-family:楷体,Arial,
js实现单双行以不同颜色显示
最新推荐文章于 2022-10-27 17:04:12 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)