1.body内容
<body>
<div style=" width:450px; margin: auto;">
<input type="text" value=""/>行
<input type="text" value=""/>列
<button type="button">添加</button>
</div>
</body>
2.script内容
<script>
//获取对象
var oBtn = document.querySelector("button");
var oIpt = document.getElementsByTagName("input");
//事件绑定
oBtn.onclick = function(){
//输入框输入的内容为字符串类型
var row = Number(oIpt[0].value);
var col = Number(oIpt[1].value);
console.log(row);
if(row==0 || col ==0 || isNaN(row) || isNaN(col)){ //行或列输入格式不正确时不创建表格
//输入文本框内容清空
oIpt[0].value = "";
oIpt[1].value = "";
return alert("非法输入，请重新输入");
}else{
var oTable = document.createElement("table");//创建table节点
document.body.appendChild(oTable);//连接节点
oTable.border = "1px solid black";
oTable.style.margin = "30px auto 0";
oTable.style.borderSpacing = "0";
for(var i=0;i<row;i++){
var oTr = document.createElement("tr");//创建tr节点
oTable.appendChild(oTr);//连接节点
oTr.style.height = "30px";
for(var j=0;j<col;j++){
var oTd = document.createElement("td");//创建td节点
oTr.appendChild(oTd);//连接节点
oTd.style.width = "100px";
}
}
}
//输入文本框内容清空
oIpt[0].value = "";
oIpt[1].value = "";
}
</script>
扫一扫
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
