前端学习随笔15 利用js实现九九乘法表

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

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

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

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

　　for(let i=0;i<10;i++){ for(let j=0;j<10;j++){ console.log(i + "x" + j + "=" + i*j); }}但是这样做有个缺点就是显示效果不佳，我们期望能够得到我们熟悉的如下图所示的九九乘法表

　　通过观察图片我们发现：

　　表格第一行为表头乘法部分是以左三角排列（即，行序号>列序号时，显示计算部分）下面我们来用代码实现。

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

　　<div id="box"></div>然后通过js代码依次创建table，表头caption，表的每一行row和每一个单元格cell

　　<script> //创建table节点和caption节点，给caption节点赋值并加入到table中 var tabNode=document.createElement("table"), capNode=document.createElement("caption"); capNode.innerHTML = "九九乘法表"; tabNode.appendChild(capNode); // 利用循环嵌套 for(let i=1;i<10;i++){ // 循环创建行 var trNode=tabNode.insertRow(); for(let j=1;j<10;j++){ // 循环创建列 var tdNode=trNode.insertCell(); if(i>=j){ //左三角显示 // 给单元格赋值 tdNode.innerHTML = j + "x" + i+ "=" + i*j; } } } // 将创建好的table加进div里面 var box = document.getElementById("box"); box.appendChild(tabNode);</script>显示效果如下图

　　最后我们添加样式

　　<style> td { border: 3px ridge rgb(218, 217, 217); } caption { border: 3px ridge rgb(218, 217, 217); font-weight: bold; }</style>得到最终效果

　　二、总结

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

　　举报/反馈