<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border: solid 1px black;
}
#container td{
border: solid 1px black;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="width">宽：</label></td>
<td><input type="number" id="width" min="1" max="500" ></td>
</tr>
<tr>
<td><label for="height">高：</label></td>
<td><input type="number" id="height" min="1" max="500" step="1"></td>
</tr>
<tr>
<td><label for="row">行：</label></td>
<td><input type="number" id="row" min="1" max="10" step="1"></td>
</tr>
<tr>
<td><label for="col">列：</label></td>
<td><input type="number" id="col" min="1" max="10" step="1"></td>
</tr>
<tr>
<td><label for="radio-btn">单选按钮：</label></td>
<td><input type="checkbox" id="radio-btn"></td>
</tr>
<tr>
<td><input type="button" id="submit" value="提交"></td>
</tr>
</table>
</form>
<div id="container"></div>
<script>
(function (){
// 事件响应兼容浏览器差异
function addEvent(ele,type,func){
if(ele.addEventListener){
ele.addEventListener(type,func);
}else if(ele.attachEvent){
ele.attachEvent("on"+type,func);
}else {
ele["on"+type]=func;
}
}
function $(id){
return document.getElementById(id);
}
var widthInput=$(‘width‘);
var rowInput=$(‘row‘);
var colInput=$(‘col‘);
var heightInput=$(‘height‘);
var radioInput=$(‘radio-btn‘);
var submit=$(‘submit‘);
var container=$(‘container‘);
addEvent(submit,‘click‘,addTable);
var arr=[‘ 宽度请输入1到500之间的数字‘,‘高度请输入1到500之间的数字‘,‘行数请输入1到10之间的数字‘,
‘列数请输入1到10之间的数字‘];
function addTable(){
var width=parseInt(getWidth());
var height=parseInt(getHeight());
var row=parseInt(getRow());
var col=parseInt(getCol());
var radio=getRadio();
if(isNaN(width)||width<1||width>500){alert(arr[0]);return;}
if(isNaN(height)||height<1||height>500){alert(arr[1]);return;}
if(isNaN(row)||row<1||row>10){alert(arr[2]);return;}
if(isNaN(col)||col<1||col>10){alert(arr[3]);return;}
var res="<table width=‘"+width+"px‘ height=‘"+height+"px‘>"+addTableCol(row,col,radio)+"</table>";
container.innerHTML=res;
}
//添加列
function addTableCol(row,col,radio){
var res="";
for(var i=0;i<col;i++){
res+="<tr>"+addTableRow(row,radio)+"</tr>"
}
console.log(2,res);
return res;
}
//添加行
function addTableRow(row,radio) {
var res="";
if(radio){
res+="<td><input type=‘radio‘></td>"
}
for(var i=0;i<row;i++){
res+="<td>1</td>";
}
console.log(3,res);
return res;
}
function getWidth(){
return widthInput.value.trim();
}
function getHeight(){
return heightInput.value.trim();
}
function getRow(){
return rowInput.value.trim();
}
function getCol(){
return colInput.value.trim();
}
function getRadio(){
return radioInput.checked;
}
})();
</script>
</body>
</html>
时间： 2024-10-01 19:08:08