<!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{
border-collapse: collapse;
}
table td{
border:1px solid #000000;
width: 100px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<table>
<!-- 固定的页面内容 -->
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>性别</td>
</tr>
</thead>
<!-- 根据数据库信息的渲染生成的页面内容
给要要操作的tbody标签,添加id属性属性值,通过id属性值,来操作标签
-->
<tbody id="tb"></tbody>
</table>
<script>
// 定义的数组,根据数组,渲染生成页面内容
var arr = [
['张123',18,'北京','男'],
['李四',19,'上海','女'],
['王五',20,'广州','男'],
['赵六',21,'重庆','女'],
];
console.log(arr)
// 定义变量,存储要写入的内容
var str = '';
// 外层循环,生成tr标签,有一维单元,就循环生成几个tr标签
// 从第一个索引 0 开始,最终数值是索引下标的最大值 --- 数组.length-1
// 生成所有索引下标的数值
// 根据数组的结构,定义循环次数,起始数值一定是0,结束数值是索引下标的最大值
for(var i = 0 ; i <= arr.length-1 ; i++){
// console.log(arr[i]);
// 外层循环生成tr标签,循环几次,就生成几个tr标签
// 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
str += '<tr>';
// 定义tr标签的内容,也就是td单元格标签
// 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
str += `<td>${i+1}</td>`;
// 其他单元格,是内层循环生成的,循环的对象是二维数组
// arr[i] 拿到的就是 每次循环,当前行,对应的二维数组
// 循环的对象是 arr[i] , 生成 arr[i] 的所有的 索引下标
// 通过索引下标,获取对应的数据
// 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1 arr[i].length-1
for(var j = 0 ; j <= arr[i].length-1 ; j++ ){
// 二维数组有几个单元,就循环几次,生成几个td单元个
// 可以生成对应的单元格
// 每一个单元的内容,就是当前二维数组单元的数据内容
// 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
// arr[i][j]
str += `<td>${arr[i][j]}</td>`;
}
str += '</tr>';
}
// 将定义好的内容,写入到tbody标签中
tb.innerHTML = str;
</script>
</body>
</html>