<html lang="en">
<head>
<meta charset="UTF-8">
<title>8行5列表格</title>
<style>
table{
table-layout:fixed;
border-collapse:collapse;
text-align:left;
}
td{
border:1px solid #aaa;
padding:5px 30px 5px 3px;
}
h3:nth-of-type(1){
color:lightblue;
}
h3:nth-of-type(2){
color:lightgreen;
}
</style>
</head>
<body>
<h1>方法一,调用style的属性</h1>
<h3>使用for循环输出8行5列的一个表格，内容aaa,注意隔行颜色</h3>
<script>
document.write("<table>");
for(var i=1;i<=8;i++){
document.write("<tr id="+i+'C'+">");
var num=parseInt(i+"C");
if(num % 2==0){
var trColor=document.getElementById(i+'C');
trColor.style.backgroundColor="lightblue";
}
for(var j=1;j<=5;j++){
document.write("<td>"+"江南美景"+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
<h1>方法二，在元素内部设置</h1>
<h3>使用for循环输出8行5列的一个表格，内容aaa,注意隔行颜色</h3>
<script>
document.write("<table>");
for(var i=1;i<=8;i++){
if(i%2==0){
document.write("<tr bgcolor='lightgreen'>")
}
for(var j=1;j<=5;j++){
document.write("<td>"+"安徽美景"+"</td>");
}
document.write("</tr>");
}
document.write("<table>");
</script>
</body>
</html>