要求:把下面数据中的对象打印出来:
定义了一个存储了若干学生信息的数组
let students = [
{ uname: '小明', age: 18, gender: '男', hometown: '河南' },
{ uname: '小红', age: 13, gender: '女', hometown: '河北' },
{ uname: '小刚', age: 28, gender: '男', hometown: '河东' },
{ uname: '小丽', age: 12, gender: '女', hometown: '河南' },
]
完成效果:
已给出css代码:
<style>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: s8px;
margin-bottom: 10px;
font-weight: 700;
}
tr {
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
成果代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: s8px;
margin-bottom: 10px;
font-weight: 700;
}
tr {
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<h2>学生信息</h2>
<p>将数据渲染到数据表中</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<script>
//数据准备
let students = [
{ uname: '小明', age: 18, gender: '男', hometown: '河南' },
{ uname: '小红', age: 13, gender: '女', hometown: '河北' },
{ uname: '小刚', age: 28, gender: '男', hometown: '河东' },
{ uname: '小丽', age: 12, gender: '女', hometown: '河南' },
]
//渲染页面
for (let i = 0; i < students.length; i++) {
document.write(`
<tr>
<th>${i + 1}</th>
<th>${students[i].uname}</th>
<th>${students[i].age}</th>
<th>${students[i].gender}</th>
<th>${students[i].hometown}</th>
</tr>
`)
}
</script>
</table>
</body>
</html>