分别使用innerHTML和DOM在网页中动态生成表格的三种不同方法。

来源：互联网发布：动漫网络黑名单编辑：程序博客网时间：2024/06/05 16:24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">function creatTable2(){var row = parseInt(document.getElementById("row").value);//列var col = parseInt(document.getElementById("col").value);//行if(col>300 ||row>100){alert("表格过大！");return;}var table = document.getElementById("table");var tabstr="";tabstr +="<table>"//alert(col+"..."+row);for(var i=0;i<col;i++){tabstr+="<tr>";for(var j=0;j<row;j++){tabstr+="<td></td>";}tabstr+="</tr>";}tabstr+="</table>";table.innerHTML=tabstr;}function creatTable(){//每次只能添加一个表格var table =document.getElementById("table");table.innerHTML="";var row = parseInt(document.getElementById("row").value);//列var col = parseInt(document.getElementById("col").value);//行var oTabNode =document.createElement("table");//表格var oTBodyNode = document.createElement("tBody");//表格体var oTrNode = null;//行var oTdNode =null;//列for(var j=0;j<col;j++){oTrNode =  document.createElement("tr");for(var i=0;i<row;i++){oTdNode = document.createElement("td");oTrNode.appendChild(oTdNode);//行添加列 }oTBodyNode.appendChild(oTrNode);//表格体添加行}//表格添加表格体oTabNode.appendChild(oTBodyNode);//表格区域添加表格document.getElementById("table").appendChild(oTabNode);//alert(oTabNode.nodeName);}function creatTable3(){//每次只能添加一个表格var row = parseInt(document.getElementById("row").value);//列var col = parseInt(document.getElementById("col").value);//行var oTabNode =document.createElement("table");//表格//行添加列 //表格体添加行for(var j=0;j<row;j++){var oTrNode = oTabNode.insertRow();for(var i=0;i<col;i++){oTrNode.insertCell();}}//表格区域添加表格table.appendChild(oTabNode);//alert(oTabNode.nodeName);}</script><style type="text/css">td{width:60px;height:40px;background-color:#909;border:#000 1px solid;}</style></head><body>    行数：<input id="col" type="text" value="0" size="8"/>        列数：<input id="row" type="text" value="0" size="8"/>    <input type="button" value="生成表格"  onclick="creatTable()"/><br/><div id="table"></div></body></html>