<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上课安排</title> <style type="text/css"> table{ border: 1px solid #FFFFFF} th{background-color: royalblue; 80px; height: 60px;} td{ 80px; height: 60px;} button.dan{background-color:#aabbcc ; 80px; height: 60px; } button.shuang{background-color:#D2E0E6 ; 80px; height: 60px; } </style> <script> //头 document.write('<table id="myTable" > <thead>'+ '<tr>'+ '<th></th>'+ '<th scope="col">星期一</th>'+ ' <th scope="col">星期二</th>'+ '<th scope="col">星期三</th>'+ '<th scope="col">星期四</th>'+ '<th scope="col">星期五</th>'+ '<th scope="col">星期六</th>'+ '<th scope="col">星期天</th>'+ '</tr>'+ '</thead>'); var i= 1;//一天的课程安排,按照一天8节课计算 while (i<9) { document.write( '<tr>'+ '<th scope="row">第'+ i +'节课</th>'); var j = 1;//星期一到星期天 while (j < 8) { //i代表第几节课,j代表星期几 if(i%2 == 0) document.write( '<td><button class="shuang">生物课</button></td>'); else document.write( '<td><button class="dan">生物课</button></td>'); j++; } document.write( '</tr>'); i++; } //尾 document.write('</table'); </script> </head> <body> </body> </html>