js算法--输入行列，生成一个表格（table）

html:

<div>
    <p>请输入行数:<input id="rows"></p>
    <p>请输入列数:<input id="cols"></p>
    <button οnclick="autocreate()">创建</button>
    <div id="test"></div>
</div>

javaScript:

functino autocreate() {
 var line = document.getElementById('rows').value;
        var list = document.getElementById('cols').value;
        var test = document.getElementById('test');

var table = "<table border = '1px'>";
for(var i = 1;i<=line;i++){
table +="<tr>";
for(var j = 1;j<=list;j++){
table +="<td>+line+"行"+list+"列"+"</td>";
}table +="</table>";

document.write(table);
test.innerHTML =table;
}

通过js输出一个table，在循环中完整地将一个表格打印完。然后才用innerHTML输出。

2、第二种方法：通过插入节点，达到输出表格。

js代码：

function drawTable(){
var input4 = document.getElementById("input4");
            var input4 = Number(input4.value);
            var input5 = document.getElementById("input5");
            var input5 = Number(input5.value);
            var div3 = document.getElementById("div3");
var a = document.createElement("table");
a.border=1;
a.width = 300;
for(var i = 0;i<input4;i++){
var tr = a.inserRow(i);
for(var j = 0;j<input5;j++){
var td = a.inserCell(j);
td.innerHTML="这是个单元格";
}
}document.getElementById("div3").appendChild(a);
}

document.createElement("table"):createElement()创建元素节点。创建了一个<table></table>的节点。

a.inserRow(i):插入一个新行。新行会插入i所在行之前。i等于表中的行数，则新行附加到表末尾。i表示所插入的位置。

a.inserCell(j):在<tr></tr>中插入一列。新单元格将被插入当前位于j指定位置的表元前。j等于行中的单元格数，被附加到行末尾。j也表示所插入的位置。

3、输入行列打印需要的模块。

在js中设置需要打印的模块数量，在style中设定每块模块的长和宽。

js代码：

function on (){
var input1 = document.getElementById("input1").value;
        var input2 = document.getElementById("input2").value;
        var div1 = document.getElementById("div1");
for(var i=0;i<input1;i++){
div.innerHTML+='<span>'+'</span>';//打印行
for (var j =0;j<input2;j++){
div1.innerHTML +='<span>+'</span>';
}
div1.innerHTML+=<'br>';
}
}

style中设置<span></span>的样式：

#div1 span{

width:50px;

height:30px;

display:inline-block;

border:1px solid #000;

}