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

html:

请输入行数:

请输入列数:

创建

javaScript:

functino autocreate() {

var line = document.getElementById('rows').value;

var list = document.getElementById('cols').value;

var test = document.getElementById('test');

var table = "

for(var i = 1;i<=line;i++){

table +="

";

for(var j = 1;j<=list;j++){

table +="

+line+"行"+list+"列"+"";

}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

var tr = a.inserRow(i);

for(var j = 0;j

var td = a.inserCell(j);

td.innerHTML="这是个单元格";

}

}document.getElementById("div3").appendChild(a);

}document.createElement("table"):createElement()创建元素节点。创建了一个

的节点。

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

a.inserCell(j):在

中插入一列。新单元格将被插入当前位于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

div.innerHTML+=''+'';//打印行

for (var j =0;j

div1.innerHTML +='+'';

}

div1.innerHTML+=';

}

}style中设置的样式：

#div1 span{

width:50px;

height:30px;

display:inline-block;

border:1px solid #000;

}