<!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="生成表格" οnclick="creatTable()"/>
<br/>
<div id="table">
</div>
</body>
</html>
分别使用innerHTML和DOM在网页中动态生成表格的三种不同方法。
最新推荐文章于 2023-07-22 12:19:21 发布