js动态创建表格

xiaoxiao2021-03-01  26

输入行数跟列数,自己生成表格

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建动态表格</title> </head> <body> <h1>创建动态表格</h1> 行数:<input type="number" name="rows" id="rows" /><br /> 列数:<input type="number" name="cols" id="cols" /><br /> <button onclick="mytable()">创建表格</button> <div id="tabDiv"></div> <script type="text/javascript"> function mytable () { var rows = document.getElementById("rows").value;//getElementByid()根据指定的id属性创建DOM对象 var cols = document.getElementById("cols").value; var table = document.createElement("table");//createElemnet()在文档中创建一个DOM对象 table.border = 1;//表格的边框为1 for (var r = 0; r < rows; r++) { var tr = document.createElement('tr'); for (var c = 0; c < cols; c++) { var td = document.createElement('td'); td.innerHTML= r +', ' + c ; tr.appendChild(td);//appendChild()方法用于把新的子节点添加到指定节点 } table.appendChild(tr); } document.getElementById("tabDiv").appendChild(table); } </script> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-3649970.html

最新回复(0)