JS开发页面小组件：table组件

<!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>
JS开发页面小组件：table组件

相关推荐
