js table多层嵌套_前端学习随笔15 利用js实现九九乘法表

前沿：次随笔对应的是第十七天到第十八天的学习任务

今天的任务：练习使用循环实现一个九九乘法表

1. 第一步，最低要求：在Console中按行输出 n * m = t
2. 然后，尝试在网页中，使用table来实现一个九九乘法表

一、实现方法

第一步很简单，我们只需要使用循环嵌套即可实现，具体代码如下

for(let i=0;i<10;i++){ for(let j=0;j<10;j++){ console.log(i + "x" + j + "=" + i*j); }}

但是这样做有个缺点就是显示效果不佳，我们期望能够得到我们熟悉的如下图所示的九九乘法表

通过观察图片我们发现：

1. 表格第一行为表头
2. 乘法部分是以左三角排列(即，行序号>列序号时，显示计算部分)

下面我们来用代码实现。

首先我们在html里面放置一个div用以容纳接下来创建的table

然后通过js代码依次创建table，表头caption，表的每一行row和每一个单元格cell

显示效果如下图

最后我们添加样式

得到最终效果

二、总结

1. 我们在添加行和列时使用的是insertRow()方法和insertCell()方法。当然我们也可以使用常规的添加节点的方法(如添加caption节点是所用方法)，如果使用该方法添加行和列需要先添加tbody节点。
2. 利用i和j的值比较来判断单元格显示内容。