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

<!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>

你可能感兴趣的:(JavaScript,html,函数,dom,csss)