前沿：次随笔对应的是第十七天到第十八天的学习任务今天的任务：练习使用循环实现一个九九乘法表第一步，最低要求：在Console中按行输出n*m=t然后，尝试在网页中，使用table来实现一个九九乘法表一、实现方法第一步很简单，我们只需要使用循环嵌套即可实现，具体代码如下for(leti=0;i10;i++){for(letj=0;j10;j++){console.log(i+x+j+=+i*j);}}但是这样做有个缺点就是显示效果不佳，我们期望能够得到我们熟悉的如下图所示的九九乘法表通过观察图片我们发现：表格第一行为表头乘法部分是以左三角排列（即，行序号列序号时，显示计算部分）下面我们来用代码实现。首先我们在html里面放置一个div用以容纳接下来创建的tabledivid=box/div然后通过js代码依次创建table，表头caption，表的每一行row和每一个单元格cellscript//创建table节点和caption节点，给caption节点赋值并加入到table中vartabNode=document.createElement(table),capNode=document.createElement(caption);capNode.innerHTML=九九乘法表;tabNode.appendChild(capNode);//利用循环嵌套for(leti=1;i10;i++){//循环创建行vartrNode=tabNode.insertRow();for(letj=1;j10;j++){//循环创建列vartdNode=trNode.insertCell();if(i=j){//左三角显示//给单元格赋值tdNode.innerHTML=j+x+i+=+i*j;}}}//将创建好的table加进div里面varbox=document.getElementById(box);box.appendChild(tabNode);/script显示效果如下图最后我们添加样式styletd{border:3pxridgergb(,,);}caption{border:3pxridgergb(,,);font-weight:bold;}/style得到最终效果二、总结我们在添加行和列时使用的是insertRow()方法和insertCell()方法。当然我们也可以使用常规的添加节点的方法（如添加caption节点是所用方法），如果使用该方法添加行和列需要先添加tbody节点。利用i和j的值比较来判断单元格显示内容。
转载请注明：http://www.aierlanlan.com/rzdk/6534.html
