您的位置：首页 > 其它

动态创建表格

2015-08-07 15:12 513 查看

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<title>8.6第二题</title>
</head>
<body>
<h3>动态创建table</h3>
<table>
<tr>
<td>行：</td>
<td><input id="row"></td>
</tr>
<tr>
<td>列：</td>
<td><input id="col"></td>
</tr>
<tr>
<td>边框粗细：</td>
<td><input id="borderWidth"></td>
</tr>
<tr>
<td>边框颜色：</td>
<td><input id="borderColor"></td>
</tr>
<tr>
<td colspan="2"><button onclick="create()">创建</button></td>
</tr>
</table>

<script>
function create(){
var row=document.getElementById("row").value;
var col=document.getElementById("col").value;
var Width=document.getElementById("borderWidth").value;
var Color=document.getElementById("borderColor").value;
if(!row || !col || !Width || !Color){
alert("输入不完整！");
}else if(isNaN(row) || isNaN(col) || parseInt(row)!=row || parseInt(col)!=col || row<=0 || col<=0){
alert("行列数必须是正整数！")
}else{
var newTable=document.getElementById("newTable");
if(newTable){document.body.removeChild(newTable);}
var table=document.createElement("table");
document.body.appendChild(table);
table.id="newTable";
for(var i=1;i<=row;i++){
var tr=document.createElement("tr");
table.appendChild(tr);
for(var j=1;j<=col;j++){
var td=document.createElement("td")
tr.appendChild(td);
td.style.border =Width +" solid "+ Color;
td.innerHTML=" ";
}
}
}
}
</script>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航