JavaScript中对数组数据进行动态生成table表格
今天给大家分享一下如何在JavaScript中对数组数据进行动态生成table表格,希望可以帮助到你。
- 第一步:
首先,我已经定义好了HTML跟CSS样式。样式如下:
代码如下:
在css中的代码:
<style>
table {
border: 1px solid blueviolet;
}
</style>
在html中的代码:
<body>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>性别</td>
</tr>
</thead>
<!-- 给标签定义id属性和属性值,通过属性值来操作标签 -->
<tbody id="tb"></tbody>
</table>
</body>
- 第二步:
在JavaScript中建立数组,模拟本地数据信息。
在实际项目中往往我们从数据库或者接口获取到的数据信息,往往都是数组形式,而且基本都是二维数组形式。
在这里我建立数组模拟本地数据信息。
<script>
var arr = [
['小明','男', 18, '70', ],
['小红','女', 19, '80', ],
['小李','男', 20, '60', ],
['小白','女', 21, '90', ],
];
</script>
- 第三步:定义变量,存储要写入的内容
// 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
var str = '';
- 第四步:将循环生成的字符串,写入到tbody标签中
// 将定义好的内容,写入到taody标签中
contain.innerHTML = str;
- 第五步:外层循环,生成tr
// 定义tr标签
for(var i = 0 ; i <= arr.length-1 ; i++){
// 外层循环生成tr标签,循环几次,就生成几个tr标签
// 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
str += '<tr>';
// 定义tr标签的内容,也就是td单元格标签,所以分为两部分
str += '</tr>';
}
第六步:内层循环分两部分:
第一部分:定义tr标签的内容,也就是td单元格标签
此时的页面效果如下图所示。
// 第一个单元格是单独生成的,不参与内层循环,是当前外层循环 索引下标+1
str += `<td>${i+1}</td>`;
第二部分:内层循环,生成其他td标签,内容是二维数组内容
效果如下图:
//这部分循环的对象是二维数组,arr[i] 拿到的就是每次循环,
//当前行,对应的二维数组,循环的对象是 arr[i] ,
//生成 arr[i] 的所有的索引下标,通过索引下标,获取对应的数据。
// 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1
for(var j = 0 ; j <= arr[i].length-1 ; j++){
//每一个单元的内容,就是当前二维数组单元的数据内容
//获取二维数组,数组变量[一维索引][二维索引]一维索引是i 二维索引是j
//arr[i][j]
str += `<td>${arr[i][j]}</td>`;
}
整体代码如下
<!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: 1px solid blueviolet;
}
</style>
</head>
<body>
<table border="1" cellpadding="20" cellspacing="0">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>成绩</td>
</tr>
</thead>
<tbody id="contain"></tbody>
</table>
<script>
// 根据数组的内容,生成页面中的table表格
// 建立数组
var arr = [
['小明', '男', 18, '70',],
['小红', '女', 19, '80',],
['小李', '男', 20, '60',],
['小白', '女', 21, '90',],
];
// 定义变量,存储生成的字符串内容,使用 += 拼接字符串形式
var str = '';
//外层循环,生成tr
for (var i = 0; i <= arr.length - 1; i++) {
// 外层循环生成tr标签,循环几次,就生成几个tr标签
// 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
str += '<tr>';
// 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
str += `<td>${i + 1}</td>`;
//当前行,对应的二维数组,循环的对象是 arr[i] ,
//生成 arr[i] 的所有的索引下标,通过索引下标,获取对应的数据。
// 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1
for (var j = 0; j <= arr[i].length - 1; j++) {
// 每一个单元的内容,就是当前二维数组单元的数据内容
// 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
str += `<td>${arr[i][j]}</td>`;
}
str += '</tr>';
}
// 将定义好的内容,写入到taody标签中
contain.innerHTML = str;
</script>
</body>
</html>
ok,希望可以帮助你,记得点个关注不迷路。