渲染表格数据有一组数分别是学生学号、姓名,年龄、班级、成绩
时间: 2023-07-10 17:28:51 浏览: 53
以下是一个简单的示例代码,可以使用JavaScript动态生成表格并渲染数据。代码使用了HTML、CSS和JavaScript,使用了循环、条件语句、DOM操作等基础知识。
```html
<!DOCTYPE html>
<html>
<head>
<title>表格渲染示例</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #ddd;
font-weight: bold;
}
</style>
<script>
var students = [
{"id": "001", "name": "张三", "age": 18, "class": "一班", "score": 90},
{"id": "002", "name": "李四", "age": 19, "class": "二班", "score": 85},
{"id": "003", "name": "王五", "age": 18, "class": "一班", "score": 95},
{"id": "004", "name": "赵六", "age": 20, "class": "三班", "score": 80}
];
function renderTable() {
// 获取table元素
var table = document.getElementById("myTable");
// 清空表格
table.innerHTML = "";
// 创建表头
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var ths = ["学号", "姓名", "年龄", "班级", "成绩"];
for (var i = 0; i < ths.length; i++) {
var th = document.createElement("th");
th.innerHTML = ths[i];
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
// 创建表格内容
var tbody = document.createElement("tbody");
for (var i = 0; i < students.length; i++) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = students[i].id;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = students[i].name;
tr.appendChild(td2);
var td3 = document.createElement("td");
td3.innerHTML = students[i].age;
tr.appendChild(td3);
var td4 = document.createElement("td");
td4.innerHTML = students[i].class;
tr.appendChild(td4);
var td5 = document.createElement("td");
td5.innerHTML = students[i].score;
tr.appendChild(td5);
tbody.appendChild(tr);
}
table.appendChild(tbody);
}
</script>
</head>
<body>
<h1>学生信息表</h1>
<button onclick="renderTable()">渲染表格</button>
<table id="myTable">
</table>
</body>
</html>
```
在代码中,我们首先定义了一个包含学生信息的数组students。然后定义了一个renderTable函数,用于渲染表格。函数首先获取table元素,并清空表格内容。然后创建表头,包含学号、姓名、年龄、班级、成绩五列。最后创建表格内容,遍历students数组并根据学生的信息创建表格行和单元格,将其添加到表格中。
在HTML代码中,我们添加了一个用于触发渲染表格的按钮和一个空的table元素,渲染表格时会将其内容动态生成并添加到table元素中。