DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: 18px;
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>
<body>
<h2>学生信息h2>
<p>将数据渲染到页面中p>
<table>
<caption>学生列表caption>
<tr>
<th>序号th>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>家乡th>
tr>
<script>
//数据准备
let students = [
{
name: '小明', age: 18, gender: '男', hometown: '北京', arr: {
a: {
b: {
c: [{ name: '小红', age: 19, gender: '女', hometown: '山东' },
{ name: '小刚', age: 20, gender: '男', hometown: '天津' },]
}
}
}
},
{ name: '小红', age: 19, gender: '女', hometown: '山东' },
{ name: '小刚', age: 20, gender: '男', hometown: '天津' },
{ name: '小丽', age: 20, gender: '女', hometown: '四川' },
{ name: '小宝', age: 29, gender: '女', hometown: '浙江' }
]
//渲染页面
// for (let i = 0; i < students[0].arr.a.b.c.length; i++) {
// document.write(`
//
// ${i + 1}
// ${students[0].arr.a.b.c[i].name}
// ${students[0].arr.a.b.c[i].age}
// ${students[0].arr.a.b.c[i].gender}
// ${students[0].arr.a.b.c[i].hometown}
//
// `)
// }
students[0].arr.a.b.c.forEach((e, index, arr) => {
document.write(`
${index + 1}
${e.name}
${e.age}
${e.gender}
${e.hometown}
`)
})
script>
table>
body>
html>
> foreach(元素本身 下标、数组本身)
官网:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/PI#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
如何生成0-10的随机数呢
Math.floor(Math.random( ) * (10 + 1))
let arr = ['red','pink','blue']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random]);
如何生成5-10的随机数
Math.floor(Math.random ( ) * ( 5 + 1))+5
如何生成N-M之间的随机数
Math.floor(Math.random ( ) * (M - N + 1)) + N