<!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. 解决github访问慢和clone慢解决方案

    在http://tool.chinaz.com/dns/ 这个网站输入github.com 打开cmd ping各个服务器ip地址,看看哪个比较好 windows下C:\Windows\System3 ...

  2. 017-Hadoop Hive sql语法详解7-去重排序、数据倾斜

    一.数据去重排序 1.1.去重 distinct与group by 尽量避免使用distinct进行排重,特别是大表操作,用group by代替 -- 不建议 select DISTINCT key ...

  3. Spring学习笔记2—AOP

    1.AOP概念 AOP(Aspect Oriented Programming):面向切面编程,AOP能够将那些与业务无关,却为业务模块所共同调用的应用(例如事务处理.日志管理.权限控制等)封装起来, ...

  4. 判断点是否在区域的python实现（射线法）

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2018-10-07 15:49:37 # @Author : Sheldon (thi ...

  5. 免费的webservice接口

    快递查询接口 http://webservice.36wu.com/ExpressService.asmx ip查询接口 http://webservice.36wu.com/ipService.as ...

  6. 异动K线2－－600532做一个分析时再给大家一只个股和近日大盘的分析

    http://bbs.tianya.cn/post-stocks-612892-3.shtml ————看了一页就感觉没什么太大的意义 选时重于选股 这是一条股市生存的基本法则 看看天涯真正的高手 现 ...

  7. Linux Shell编程 cut、print命令

    cut命令:查找符合条件的列 cut  命令是在文件中提取符合条件的列,虽然 cut 命令用于提取符合条件的列,但是也要一行一行地进行数据提取.也就是说,先要读取文本的第一行数据,在此行中判断是否有符 ...

  8. 读完这篇文章，就基本搞定了Redis数据库

    简单来说Redis就是一个数据库,不过与传统的数据库不同的是Redis的数据是存在内存中的,所以存写速度非常快,因此Redis被广泛应用于缓存方向. 另外,Redis也经常用来做分布式锁.Redis提 ...

  9. 关于Pytorch的二维tensor的gather和scatter_操作用法分析

    看得不明不白(我在下一篇中写了如何理解gather的用法) gather是一个比较复杂的操作,对一个2维tensor,输出的每个元素如下: out[i][j] = input[index[i][j]] ...

  10. c# 图片 与 BASE64 字符串 互相转换。

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...