JavaScript操控css -2:巧用一个变量设置奇数行,偶数行

真的不得不佩服作者大大的思维.膜拜


<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>JS-操作CSS-1</title>
<style type=”text/css”>
table,th,td{
border: 2px solid black;
border-collapse:collapse;
width: 100px;
}

</style>
<script type=”text/javascript”>
function changeBg(){//定义函数
var get_table =document.getElementsByTagName(“table”);//获取页面中的table标签
var obb;//定义变量 obb(偶数)
for (var i = 0; i < get_table.length; i++) {//开始遍历table
obb =false;//设置偶数行等于 假
var get_table_tr=get_table[i].getElementsByTagName(“tr”);//设置get_table等于table中的tr元素
for (var d = 0; d < get_table_tr.length; d++) {//开始遍历tr
if (obb==true) {//如果偶数行等于 真
get_table_tr[d].style.background=”red”;//设置tr的背景颜色为红色
obb=false;//设置obb等于 假
}else{//否则
obb=true;//返回obb等于 真
}
}
}
}

window.onload=function(){//页面加载完毕加载函数
changeBg();
}

</script>
</head>
<body>
<table>
<tr>
<th>名字</th>
<th>性别</th>
</tr>
<tr>
<td>soul</td>
<td>保密</td>
</tr>
<tr>
<td>seeker</td>
<td>你猜</td>
</tr>

</table>

</body>
</html>