<!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. ApexSQL Recover 恢复一个被drop的表的数据

    没有备份的情况下恢复一个被drop的表的数据 ApexSQL Recover 恢复一个被drop的表的数据 转自:https://solutioncenter.apexsql.com/zh/%E6%B ...

  2. Django of python 中文文档 及debug tool

    http://python.usyiyi.cn/django/index.html http://www.ziqiangxuetang.com/django/django-views-urls.htm ...

  3. hadoop学习第三天-MapReduce介绍&&WordCount示例&&倒排索引示例

    一.MapReduce介绍 (最好以下面的两个示例来理解原理) 1. MapReduce的基本思想 Map-reduce的思想就是“分而治之” Map Mapper负责“分”,即把复杂的任务分解为若干 ...

  4. pandas（零）数据结构

    pandas的两个主要的数据结构: Series series是一种类似于一维数组的对象,它由一组数据(NumPy数组类型的数据)和一组与之相关的数据标签(索引)组成. from pandas imp ...

  5. java上机

    package wordcont; import java.io.BufferedReader; import java.io.FileReader; import java.util.ArrayLi ...

  6. EXCEL 从网页复制的内容 单/多选框 在EXCEL删不掉 及 2007添加开发工具选项卡

    从网页复制到Excel中的单选.多选框等,有时候删除时怎么都删不掉,很是恶心.这时候需要使用“开发工具”来删除.它是设计模式下的一种组件或者说控件. Excel 2007 的可以用下图方式按delet ...

  7. LDAP注入

    理解LDAP与LDAP注入 0x01 LDAP简介 查阅了一些网上的资料,读了好久还是觉得理解起来很困难,感觉还是不够干,之后看到的一个博客http://www.chinaunix.net/old_j ...

  8. Loadrunder脚本篇——关联数组（参数数组）

    导言 前面说过可以用关联取出服务器相关的一些动态变化的信息,前面也提过web_reg_save_param中可以设置ord=all,代表从服务器中取出的是一个数组,它试用的场景是当我访问一个发帖网站, ...

  9. UIPageControl修改圆点大小，根据View大小自适应

    遇到了个基本的控件问题,当设置UIPageControl的frame很小时,上面的小圆点会忽视view的frame而将圆点显示到控件外面. 但是如果想要设置小一点的圆点,或改变圆点间的间距,从而实现自 ...

  10. 方法——<37>

    1,返回url参数 /* * 返回参数值 * @method getUrlPara * @papram {string},url中参数名 * @return {string},url中参数值 * */ ...