<!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>