题目描述:完成一个99乘法表,如下图所示,用js生成,不能有table
本来想用table实现,但是table貌似只能实现阶梯效果,因为table并不能进行错位。
99乘法很简单两个for循环就可以实现,主要是布局,我搞了很久。
布局解析:1. 一个div包裹住全部
2.div中有九个div分别代表每一行
3.每一行div中有一个span元素,为了能够设置它的宽高,我们将其显示为inline-block
var tab = document.createElement('div'); //包裹所有的div for(var i = 1; i <=9 ; i++){ var tr = document.createElement('div'); //生成9行div元素,存放每一层的span tr.style.textAlign='center'; //设置内联元素水平居中 tab.appendChild(tr); //将tr放入tab中 for(var j = 1,str=""; j<=i ; j++){ str=j+"x"+i+"="+i*j+" "; var td = document.createElement('span'); td.style.borderTop = '1px solid black';//边框 td.style.borderRight = '1px solid black'; td.style.padding = '10px 20px'; td.style.verticalAlign = 'middle';//垂直居中 td.style.display = 'inline-block';//可以设置统一的宽度 td.style.fontSize = '5px';//设置字体的大小 if( j == 1){ td.style.borderLeft = '1px solid black'; } if(i == 9){ td.style.borderBottom = '1px solid black'; } td.innerHTML=str; tr.appendChild(td); } } document.body.appendChild(tab); 边框的设置需要注意,不能有重叠。设定每一个span都有上边框和右边框,左边框只有J=1时才会有,下边框只有最后一层需要。
整体还是比较简单的,唯一需要注意的就是边框。
