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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271585.html
標籤：其他
上一篇：前端提高篇(九十四)：滑鼠事件
下一篇：關于JS中target屬性