function stripeTables(){
if(!document.getElementsByTagName) return false;
var tables=document.getElementsByTagName("table");
for(var i=0;i<tables.length;i++){
var odd=false;
var rows=tables[i].getElementsByTagName("tr");
for(var j=0;j<rows.length;j++){
if(odd==true){
rows[j].style.backgroundColor="#ffc";
odd=false;
}
else{
odd=true;
}
}
}
}
window.onload=stripeTables;
<table>
<caption>研发中心人数统计</caption>
<thead>
<tr>
<th>程序组</th>
<th>设计组</th>
</tr>
</thead>
<tbody>
<tr>
<td>研发中心程序1组</td>
<td>研发中心设计1组</td>
</tr>
<tr>
<td>研发中心程序2组</td>
<td>研发中心设计2组</td>
</tr>
<tr>
<td>研发中心程序3组</td>
<td>研发中心设计3组</td>
</tr>
</tbody>
</table>JS中的ODD难道是辅助用的变量?如何判断隔行变色的。
if(!document.getElementsByTagName) return false;
var tables=document.getElementsByTagName("table");
for(var i=0;i<tables.length;i++){
var odd=false;
var rows=tables[i].getElementsByTagName("tr");
for(var j=0;j<rows.length;j++){
if(odd==true){
rows[j].style.backgroundColor="#ffc";
odd=false;
}
else{
odd=true;
}
}
}
}
window.onload=stripeTables;
<table>
<caption>研发中心人数统计</caption>
<thead>
<tr>
<th>程序组</th>
<th>设计组</th>
</tr>
</thead>
<tbody>
<tr>
<td>研发中心程序1组</td>
<td>研发中心设计1组</td>
</tr>
<tr>
<td>研发中心程序2组</td>
<td>研发中心设计2组</td>
</tr>
<tr>
<td>研发中心程序3组</td>
<td>研发中心设计3组</td>
</tr>
</tbody>
</table>JS中的ODD难道是辅助用的变量?如何判断隔行变色的。
然后
判断true 就设置颜色
设置过后再设置为相反的
就达到了 隔行的效果啊
function stripeTables(){
if(!document.getElementsByTagName) return false;
var tables=document.getElementsByTagName("table");
for(var i=0;i<tables.length;i++){
var odd=false;
var rows=tables[i].getElementsByTagName("tr");
for(var j=0;j<rows.length;j++){//进入循环
if(odd){ //2.第二行的时候执行这里
rows[j].style.backgroundColor="#ffc";//3.将行的背景色设为#ffc
odd=false;//4.将odd设为false,这样在循环第三行的时候就又执行下面那行代码,以此类推
}
else odd=true;//1.第一行的时候执行这里,将odd设为true,这样在循环第二行的时候就执行上面那段代码了
}
}
}
window.onload=stripeTables;其实也可以不用odd<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <BODY>
<table>
<caption>研发中心人数统计</caption>
<thead>
<tr>
<th>程序组</th>
<th>设计组</th>
</tr>
</thead>
<tbody>
<tr>
<td>研发中心程序1组</td>
<td>研发中心设计1组</td>
</tr>
<tr>
<td>研发中心程序2组</td>
<td>研发中心设计2组</td>
</tr>
<tr>
<td>研发中心程序3组</td>
<td>研发中心设计3组</td>
</tr>
</tbody>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function stripeTables(){
if(!document.getElementsByTagName) return false;
var tables=document.getElementsByTagName("table");
for(var i=0;i<tables.length;i++){
var rows=tables[i].getElementsByTagName("tr");
for(var j=0;j<rows.length;j++){
if(j%2==1) rows[j].style.backgroundColor="#ffc"; //i除2的余数为1的话背景色改变
}
}
}
window.onload=stripeTables;
//-->
</SCRIPT>
</BODY>
</HTML>