在js中创建一个输入行和列点击生成表单,就可以生成一个写有第多少行多少列的表格？

JavaScript09

在js中创建一个输入行和列点击生成表单,就可以生成一个写有第多少行多少列的表格？,第1张

这边写了个，请保存为 表格.html测试

<html>

<body>

<h1>JavaScript 生成表格</h1>

<h2>行：<input id=mrow type=number/>

列：<input id=mcolumn type=number/>

<input type="button" value="生成表格" onclick="gettable()" /></h2>

<hr/>

<p id="demo"></p>

<script type="text/javascript">

function gettable()

{

mrow=document.getElementById("mrow").value

mcolumn=document.getElementById("mcolumn").value

mytable="<table border=1>"

for (i = 0i <mrowi++) {

mytable += "<tr>"

for(j=0j<mcolumnj++){

mytable+="<td>"+"第"+(i+1)+"行 第"+(j+1)+"列"+"</td>"

}

mytable += "</tr>"

}

mytable+="</table>"

document.getElementById("demo").innerHTML=mytable

}

</script>

</body>

</html>

<table border="1">

<tbody id="new">

<tr><td>a</td><td>1</td></tr>

<tr><td>b</td><td>2</td></tr>

<tr><td>c</td><td>3</td></tr>

</tbody>

</table>

<script type="text/javascript">

var table = document.getElementById("new")

// 增加行

var newTR= document.createElement("tr")

var newTD1 = document.createElement("td")

var newText1 = document.createTextNode("d")

var newTD2 = document.createElement("td")

var newText2 = document.createTextNode("4")

newTD1.appendChild(newText1)

newTD2.appendChild(newText2)

newTR.appendChild(newTD1)

newTR.appendChild(newTD2)

table.appendChild(newTR)

//增加列

var tr = table.getElementsByTagName("tr")

for(var i=0i<tr.lengthi++) {

var newTD = document.createElement("td")

var newText = document.createTextNode(i)

newTD.appendChild(newText)

tr[i].appendChild(newTD)

}

</script>