<!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组件的更多相关文章

  1. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  2. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  3. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  4. 从微信小程序到鸿蒙js开发【04】——list组件

    目录: 1.可滚动区域 2.list + list-item 3.list + list-item-group + list-item 1.可滚动区域 在许多场景中,页面会有一块区域是可滚动的,比如这 ...

  5. 从微信小程序到鸿蒙js开发【05】——tabs组件&每日新闻

    目录: 1.tabs, tab-bar, tab-content 2.tabs的事件处理 3.tabs实现的每日新闻 1.tabs, tab-bar, tab-content 上章说到,鸿蒙的list ...

  6. 小程序开发-页面导航栏navigation-bar组件

    导航栏navigation-bar 页面导航条配置节点,用于指定导航栏的一些属性.只能是 page-meta 组件内的第一个节点,需要配合它一同使用. 通过这个节点可以获得类似于调用 wx.setNa ...

  7. 《Node入门》读书笔记——用Node.js开发一个小应用

    Android APP的开发告一段落,一个稳定的.实现了基本功能的APP已经交付用户使用了!我和老板交流了下,接下来准备转战Node.js了,而且一部分前端的功能也要做进去!哈哈哈~~~接下来要朝一个 ...

  8. 关于js开发的小问题

    一.开发当中经常会动态拼接html,当然为了简便性好多人直接就是使用内联事件: $('#td1').html( '<a href="#" onclick="app. ...

  9. 尝试用Vue.js开发网页小游戏的过程

    准备 首先去官方下载并安装VSCODE,下载地址 https://code.visualstudio.com/.安装后打开会发现是英文版的,需要去安装插件来汉化.具体是在扩展插件搜索chinese,选 ...

随机推荐

  1. mssql 中文乱码 字库集 问题解决方法

    The database could not be exclusively locked to perform the operation(SQL Server 5030错误解决办法)   SQL S ...

  2. UI控件之UIView与动画

    UIView:用来展示用户的界面,响应用户的操作(继承自UIResponder) UIView的作用:绘图.动画.处理事件 UIView可以包含和管理子视图,并且决定子视图的位置大小 获取所有的子视图 ...

  3. Java泛型详解(转)

    文章转自  importNew:Java 泛型详解 引言 泛型是Java中一个非常重要的知识点,在Java集合类框架中泛型被广泛应用.本文我们将从零开始来看一下Java泛型的设计,将会涉及到通配符处理 ...

  4. 去重除了indexOf的其他方法（使用对象Key的方法）及统计重复次数

    1.去重: 法1:使用数组IndexOf去重 法2:使用对象Key: <script> var arr1 = [1,13,24,11,11,14,1,2]; let unique = fu ...

  5. linux systemctl 指令 —— 阮一峰

    Systemd 指令 原文链接如果有效,请点击原文链接查看.原文:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.ht ...

  6. Qt移植对USB鼠标键盘、触摸屏的支持

    .USB键盘 经过一番搜索,发现对Qt键盘的支持主要关系到两个方面: 1. 键盘类型确定: 4.7以前的Qt版本,如果是PS2圆孔键盘,Qt编译时需加上选项:-qt-kbd-vr41xx(未测试):如 ...

  7. 表单元素disabled禁用后不能自动提交到服务器

    表单元素disabled禁用后不能自动提交到服务器,项目中需要一个元素只展示不修改,所以把一个input元素设置成了disabled="disabled",但是提交的时候改数据值是 ...

  8. iis和apache共享80端口

    Windows server 2003服务器上安装有默认 IIS 6和Apache两个服务器,IIS运行的一个.net程序,apache运行php程序,现在想让它们同时都能通过80端口访问,设置起来还 ...

  9. strspn() 和 strcspn() 函数【转】

    本文转载自:https://flyer103.wordpress.com/2011/06/03/strspn-%E5%92%8C-strcspn-%E5%87%BD%E6%95%B0/ 前几天在看一本 ...

  10. codeforces 353D 递推 找规律

    题意:一组男生女生在排队,每秒钟所有排在女生左边的男生与她相邻的女生交换位置,求女生全部换到男生前面的时间. 思路: 解法一:队伍最前面的那些女生不需要交换,后面的女生有两种状态:畅通无阻,前一个女生 ...