基于JavaScript代码实现自动生成表格
废话不多说,直接给大家贴js代码了,具体代码如下所示:
//js实现输入表格行数、列数自动生成表格源代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>自动创建表格</title>
<styletype="text/css">
table{
width:300px;
height:100px;
border:#0C91pxsolid;
border-collapse:collapse;
}
</style>
<scripttype="text/javascript"language="javascript">
functionautocreate(){
//创建table表格
vartable=document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("background","red");
//获取行数值
varline=document.getElementById("line").value;
//获取列数值
varlist=document.getElementById("list").value;
for(vari=0;i<=line;i++){
//alert(line);
//创建tr
vartr=document.createElement("tr");
for(varj=0;j<=list;j++){
//alert(list);
//创建td
vartd=document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("d1").appendChild(table);
}
</script>
</head>
<body>
<inputtype="text"id="line">行数
<inputtype="text"id="list">列数
<inputtype="button"value="添加表格"onclick="autocreate()">
<divid="d1"style="height:400px;width:300px;"></div>
</body>
</html>
以上所述是小编给大家介绍的基于JavaScript代码实现自动生成表格的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!