<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<center>
<br/><br/>
<h1>自动生成表格<h1/>
行数 <input type="text" value="5" id="rows"style="width: 300px;height: 40px"><br/><br/>
列数 <input type="text" value="5" id="cols" style="width: 300px;height: 40px"><br/><br/>
<input type="button" value="创建表格" onclick="creatTab()" style="width: 200px;height: 50px"><br/><br/>
<div id="div1"></div>
<script>
function creatTab(){
rows=document.getElementById('rows').value;
cols=document.getElementById('cols').value;
div1=document.getElementById('div1');
var ta=div1.getElementsByTagName('table')[0]
if (ta) {ta.parentNode.removeChild(ta)}
var tab = document.createElement("table");
tab.width=1000;
tab.border=1;
for(var i=0;i<rows;i++){
tab.insertRow(i)
for(var j=0;j<cols;j++){
tab.rows[i].insertCell(j).innerHTML=i;
tab.rows[i].cells[j].style.background='pink'
}
}
document.getElementById("div1").appendChild(tab)
}
</script>
</center>
</body>
</html>
简单表格输入自动生成
最新推荐文章于 2024-07-22 22:44:22 发布