<script type="text/javascript">
function createTable(width,rows,cells)
{
//创建一个表格对象
var mytable=document.createElement("table")
mytable.cellSpacing="1px"
//创建一个表头对象
var mythead=document.createElement("thead")
for(a=0a<1a++)
{
var myrow=document.createElement("tr")
for(b=0b<cellsb++)
{
var mytd=document.createElement("td")
mytd.innerHTML="表 头 " +(b+1)
mytd.style.cssText="text-align:center"
myrow.appendChild(mytd)
}
mythead.appendChild(myrow)
}
//创建一个表体对象
var mytbody=document.createElement("tbody")
for(i=0i<rowsi++)
{
var myrow=document.createElement("tr")
for(j=0j<cellsj++)
{
var mytd=document.createElement("td")
mytd.style.backgroundColor="#fff"
mytd.innerHTML="第"+(i+1)+"行第"+(j+1)+"列"
myrow.appendChild(mytd)
}
mytbody.appendChild(myrow)
}
//创建一个表脚对象
var mytfoot=document.createElement("tfoot")
for(c=0c<1c++)
{
var myrow=document.createElement("tr")
for(d=0d<1d++)
{
var mytd=document.createElement("td")
mytd.innerHTML="脚"+(d+1)
mytd.style.cssText="text-align:center"
mytd.colSpan="10"
myrow.appendChild(mytd)
}
mytfoot.appendChild(myrow)
}
//将表头追加到表格
mytable.appendChild(mythead)
//将表体追加到表格
mytable.appendChild(mytbody)
//将表脚追加到表格
mytable.appendChild(mytfoot)
//追加对象样式
mythead.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"
mytable.style.cssText="background-color:#999border:0pxwidth:"+width+"px"
mytfoot.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"
document.body.appendChild(mytable)
}
</script>
这边写了个，请保存为 表格.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>
