您的位置：首页 > Web前端 > JavaScript

[HTML]JS添加表格

2016-07-18 20:02 417 查看

<!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; width: 80px; height: 60px;}
td{ width: 80px; height: 60px;}
button.dan{background-color:#aabbcc ; width: 80px; height: 60px; }
button.shuang{background-color:#D2E0E6 ; width: 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航