<!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. Python多进程multiprocessing

    import multiprocessing import time # 具体的处理函数,负责处理单个任务 def func(msg): # for i in range(3): print (msg ...

  2. 005-快捷键，host，查看版本

    一.系统快捷键 设置 键盘--查看 shift+ctrl +print  区域截图至剪切版 ctrl+alt+箭头     切换工作区 自定义打开终端快捷键 设置->键盘->自定义:名称: ...

  3. Python替换文件内容

    #!/usr/bin/env python import fileinput for line in fileinput.input('fansik',inplace=1): line = line. ...

  4. 剑指offer 面试48题

    面试48题:题目:最长不含重复字符的子字符串 题:请从字符串中找出一个最长的不包含重复字符的子字符串,计算该最长字符串的长度.假设字符串中只包含‘a’-‘z’的字符.例如,在字符串“arabcacfr ...

  5. 剑指offer 面试59题

    面试59题: 题目:队列的最大值. 题目一:滑动窗口的最大值. 给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如:如果输入数组为[2,3,4,2,6,2,5,1]及滑动窗口大小为3,那 ...

  6. Linux文件IO

    参考<unix高级环境编程> 本章开始讨论U N I X系统,先说明可用的文件I / O函数——打开文件.读文件.写文件等等.大多数U N I X文件I / O只需用到5个函数:o p e ...

  7. 使用jQuery方法做任务左右栏移动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. mysql 触发器 存储过程 java调用

    触发器和存储过程是为了提高SQL的运行效率. SQL语句先编译.后执行,而触发器与存储过程都会提前预编译完成,且只编译一次,供反复调用. 随着时代的进步,硬件与带宽的提升,触发器和存储过程提升效率并不 ...

  9. Qt5.3.0的安装与测试

    Qt5.3.0的安装与测试(交叉编译,用于arm,支持tslib触摸屏) 本次移植可以使用触摸屏. 首先下载源码包: http://download.qt.io/official_releases/q ...

  10. HTseq-count

    HTSeq:一个用于处理高通量数据(High-throughout sequencing)的python包.HTSeq包有很多功能类,熟悉python脚本的可以自行编写数据处理脚本.另外,HTSeq也 ...