JS--对数组数据进行动态生成table表格

最新推荐文章于 2024-04-25 00:00:00 发布

什什么都绘

最新推荐文章于 2024-04-25 00:00:00 发布

阅读量1.1w

点赞数 16

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_39406353/article/details/104956276

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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,希望可以帮助你，记得点个关注不迷路。

什什么都绘

关注

16
点赞
踩
54

收藏

觉得还不错? 一键收藏
5
评论
JS--对数组数据进行动态生成table表格

JavaScript中对数组数据进行动态生成table表格今天给大家分享一下如何在JavaScript中对数组数据进行动态生成table表格，希望可以帮助到你。第一步：首先，我已经定义好了HTML跟CSS样式。样式如下：代码如下：在css中的代码： <style> table { border: 1px solid blu...
复制链接

扫一扫