论坛 › 马黑黑教程专版 › JS：双循环for语句之表格制作

马黑黑 发表于 2022-2-13 20:08

JS：双循环for语句之表格制作

本帖最后由 马黑黑 于 2022-2-13 20:11 编辑

表格在HTML5时代的应用，更多的是为数据的展现服务。当表格要呈现的数据量庞大，一一制作HTML表格是一件繁琐的工作，JS的循环语句可以简化我们的表格制作工作。

通常，我们需要将要呈现的数据赋值给一个JS二维数组，这个工作现实中我们完全可以非常容易做到：

let dataAr = [
      ["章小丽","德瑞数码","28","19"],
      ["肖英豪","橙子菜蔬","23","30"],
      ["鹤非非","广元面食","18","12"],
      ["吴亚红","欧达小粮仓","27","30"],
      ["韩娜","明龙速送","26","32"],
      ["彭良军","阳光连锁局","35","29"]
];


从第三方应用生成上述JS数组代码，的确不难。这样的数组，估计无需多做说明，无非就是装载了姓名、所属公司、年龄和收入等信息，还可以无限扩展，JS都能一一处理。

以上面的数据为例，生成的表格，基于数据内容的，无非就是 dataAr.length * 4 的表格，表格的行就是 <tr>...</tr>标签，for语句中，外循环将从 0 开始循环dataAr.length 次：

for(k=0; k<dataAr.length; k++){
    // 写入 tr 起始代码
    // 内循环for语句代码
    // 写入 tr 结束代码
}

而内循环，根据子数组数据，是 4 个数据，由 td 标签完成，因为 td 构成单元格。内循环将在外循环的每一次循环执行4个循环：

for(j=0; j<4; j++){
    // 根据子数组读取并写入每个单元格的数据：dataAr
}


而循环之前，表格的HTML代码要有个起始部分，循环结束HTML表格要收尾。这样，整个表格就制作完毕。下面是表格的JS绘制代码：

let tblStr ="<table><tr><th>姓名</th><th>公司</th><th>年龄</th><th>年薪</th></tr>\n";
for(k=0; k<dataAr.length; k++){
      tblStr += "<tr>";
      for(j=0; j<4; j++){
                tblStr += "<td>" + dataAr + "</td>";
      }
      tblStr += "</tr>\n";
}
tblStr += "</table>\n";
document.getElementById("tblBox").innerHTML = tblStr;


可以看到，JS代码并不复杂，也没有任何难点。核心部分就是双循环for语句，弄懂这个，对双循环语句就会有新的感悟。

马黑黑 发表于 2022-2-13 20:09

<style type="text/css">
#tblBox { width: 720px; margin: auto; }
#tblBox table { width: 100%; border-collapse:collapse; }
#tblBox table tr:nth-child(odd) { background: #f5f5f5; }
#tblBox table tr:nth-child(even) { background: #e3e3e3; }
#tblBox table th, #tblBox table td { border:1px solid #444; padding: 4px; }
#tblBox table th { background: olive; color: #fff;}
#tblBox table td { height: 20px; }
</style>

<div id="tblBox">表格数据</div>

<script language="javascript">

let dataAr = [
        ["章小丽","德瑞数码","28","19"],
        ["肖英豪","橙子菜蔬","23","30"],
        ["鹤非非","广元面食","18","12"],
        ["吴亚红","欧达小粮仓","27","30"],
        ["韩娜","明龙速送","26","32"],
        ["彭良军","阳光连锁局","35","29"]
];

let tblStr ="<table><tr><th>姓名</th><th>公司</th><th>年龄</th><th>年薪</th></tr>\n";
for(k=0; k<dataAr.length; k++){
        tblStr += "<tr>";
        for(j=0; j<4; j++){
                tblStr += "<td>" + dataAr + "</td>";
        }
        tblStr += "</tr>\n";
}
tblStr += "</table>\n";
document.getElementById("tblBox").innerHTML = tblStr;

</script>

红影 发表于 2022-2-13 20:24

通过双循环，就把数据都调用进去了，真棒{:4_187:}

马黑黑 发表于 2022-2-13 20:28

红影 发表于 2022-2-13 20:24
通过双循环，就把数据都调用进去了，真棒

嗯，看好表格 tr、td 的关系，tr放在外循环，生成数组长度的行，td放在内循环，生成每一个子元素内容

红影 发表于 2022-2-13 20:46

马黑黑 发表于 2022-2-13 20:28
嗯，看好表格 tr、td 的关系，tr放在外循环，生成数组长度的行，td放在内循环，生成每一个子元素内容

嗯，其实这个双循环每次都觉得代码不多，却挺难理解。

马黑黑 发表于 2022-2-13 20:50

红影 发表于 2022-2-13 20:46
嗯，其实这个双循环每次都觉得代码不多，却挺难理解。

有点抽象。像内循环吧：

        for(j=0; j<4; j++){
                tblStr += "<td>" + dataAr + "</td>";
        }

j第一次从0开始执行，此时写入td和数据，数据是外循环第k次的0下标数据，就是姓名；第二次数据是第k次1下标数据，公司；第三次是第k次2下标数据，年龄；第四次是第k次3下标数据，收入。每一次外循环都做一次这样的内循环。

红影 发表于 2022-2-14 12:43

马黑黑 发表于 2022-2-13 20:50
有点抽象。像内循环吧：

        for(j=0; j

也就是说每一次外循环，对应四次内循环吧。
每个单元格的数据：dataAr——这个表示方式挺难的。应该就是你这个楼层的解释吧。也就是第K次要做的事，有四次循环，把下标j从0一直取值到3.然后进入下一个外循环，一直到dataAr.length的值用完。

黑黑看得很准，我最迷糊的就是内循环的单元格数据的表示。

马黑黑 发表于 2022-2-14 13:51

红影 发表于 2022-2-14 12:43
也就是说每一次外循环，对应四次内循环吧。
每个单元格的数据：dataAr——这个表示方式挺难的。应 ...

内循环会用到外循环的步进变量，dataAr 中，每一次的 k 值都不同，这意味着读取数组的第一个下标会跟着外循环变化；j 是内循环步进变量，j 的变化是内循环自己的变化，本例中，会从 0 到 3 变化着。

理解双循环，要先能理解但循环。每一次单循环的这类变化：

for (v=0; v<9; v++){
    console.log("变量v的步进: ", v);
}

执行后，可以在控制台看到变量 v 的变化，很直观：

变量v的步进:0
v.html:4 变量v的步进:1
v.html:4 变量v的步进:2
v.html:4 变量v的步进:3
v.html:4 变量v的步进:4
v.html:4 变量v的步进:5
v.html:4 变量v的步进:6
v.html:4 变量v的步进:7
v.html:4 变量v的步进:8


在本地查看自己的JS代码运行情况，想查看什么值，就用 console.log(值1, 值2, 值3, ...., 值n) 方法，各值用逗号隔开。如上面的for语句，我想查看每一次循环变量 v 的变化，所以我这样设置 console.log() :

console.log("变量v的步进: ", v);

其中，值1是自定义的友好显示字符，v 是步进变量（我们就是要查看它的步进情况）。其实值1可以不要，直接这样：

console.log(v);

这就是直接查看v的变化了。

要启用控制台，可在本地运行编写好的JS代码后，按 F12，然后选择控制台。

红影 发表于 2022-2-14 14:56

马黑黑 发表于 2022-2-14 13:51
内循环会用到外循环的步进变量，dataAr 中，每一次的 k 值都不同，这意味着读取数组的第一个下标会 ...

单个的容易看，嵌套在一起的有点反应不过来。

马黑黑 发表于 2022-2-14 16:52

红影 发表于 2022-2-14 14:56
单个的容易看，嵌套在一起的有点反应不过来。

嗯，这需要反复揣度

红影 发表于 2022-2-14 20:21

马黑黑 发表于 2022-2-14 16:52
嗯，这需要反复揣度

有道理，慢慢熟悉它们。

马黑黑 发表于 2022-2-15 08:49

红影 发表于 2022-2-14 20:21
有道理，慢慢熟悉它们。

对于没有编程基础的人来说，理解循环需要一点努力，过了这一关，应该就入门了

红影 发表于 2022-2-15 11:09

马黑黑 发表于 2022-2-15 08:49
对于没有编程基础的人来说，理解循环需要一点努力，过了这一关，应该就入门了

我还没入门，感觉这里头有点晕{:4_173:}

马黑黑 发表于 2022-2-15 11:51

红影 发表于 2022-2-15 11:09
我还没入门，感觉这里头有点晕

先理解单循环，然后在脱单

红影 发表于 2022-2-15 14:03

马黑黑 发表于 2022-2-15 11:51
先理解单循环，然后在脱单

单循环的 console.log("变量v的步进: ", v);能明白。
内部循环的这个 tblStr += "<td>" + dataAr + "</td>";就比较复杂，不明辨变量可以这样调用{:4_173:}

马黑黑 发表于 2022-2-15 17:40

红影 发表于 2022-2-15 14:03
单循环的 console.log("变量v的步进: ", v);能明白。
内部循环的这个 tblStr += "" + dataAr + "" ...

循环过程中，每一次都可以做相应的工作，比如所举栗子中的表格字串拼接，仅此而已

红影 发表于 2022-2-16 10:02

马黑黑 发表于 2022-2-15 17:40
循环过程中，每一次都可以做相应的工作，比如所举栗子中的表格字串拼接，仅此而已

表格字串也能调用，这个不熟悉。所以之前有点迷糊。

马黑黑 发表于 2022-2-16 13:27

红影 发表于 2022-2-16 10:02
表格字串也能调用，这个不熟悉。所以之前有点迷糊。

表格的HTML代码，以及其他任何的字符形式的东东，都可以当做字符串来处理。我的示例里，就是组建一些HTML代码之类的

红影 发表于 2022-2-16 14:04

马黑黑 发表于 2022-2-16 13:27
表格的HTML代码，以及其他任何的字符形式的东东，都可以当做字符串来处理。我的示例里，就是组建一些HTML ...

嗯嗯，对于这点，我总是反应不过来{:4_173:}

马黑黑 发表于 2022-2-16 14:12

红影 发表于 2022-2-16 14:04
嗯嗯，对于这点，我总是反应不过来

要真正明白过来，依靠的是自己动手去做，看看不够的

查看完整版本: JS：双循环for语句之表格制作