在javascript中用document函数实现课程表
时间: 2023-08-20 20:05:55 浏览: 54
要实现课程表,你需要一个HTML页面来显示课程表的布局,然后使用JavaScript代码来动态地创建表格,并将课程信息填充到表格中。
以下是一个基本的HTML页面布局:
```html
<!DOCTYPE html>
<html>
<head>
<title>课程表</title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1>课程表</h1>
<div id="table-container"></div>
<script src="script.js"></script>
</body>
</html>
```
在这个HTML页面中,我们使用了一个div元素来作为表格容器,同时引入了一个JavaScript文件script.js,它将负责创建和填充表格。
下面是一个简单的JavaScript代码示例来创建和填充一个课程表:
```javascript
// 定义课程信息
var courses = [
{ name: "数学", time: "周一 8:00-9:40", location: "教学楼101" },
{ name: "英语", time: "周二 10:00-11:40", location: "教学楼201" },
{ name: "计算机科学", time: "周三 13:30-15:10", location: "教学楼301" },
// ...
];
// 创建表格
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var header1 = document.createElement("th");
header1.appendChild(document.createTextNode("课程名称"));
var header2 = document.createElement("th");
header2.appendChild(document.createTextNode("上课时间"));
var header3 = document.createElement("th");
header3.appendChild(document.createTextNode("上课地点"));
headerRow.appendChild(header1);
headerRow.appendChild(header2);
headerRow.appendChild(header3);
table.appendChild(headerRow);
// 填充数据
for (var i = 0; i < courses.length; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
cell1.appendChild(document.createTextNode(courses[i].name));
var cell2 = document.createElement("td");
cell2.appendChild(document.createTextNode(courses[i].time));
var cell3 = document.createElement("td");
cell3.appendChild(document.createTextNode(courses[i].location));
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
table.appendChild(row);
}
// 将表格添加到页面中
document.getElementById("table-container").appendChild(table);
```
这段代码会创建一个表格,并将课程信息填充到表格中,最后将表格添加到页面中。
你可以根据需要修改课程信息和表格样式来适应你的实际需求。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)