<!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. jquery on 确认删除

    $(document).on('click', '.delbtn', function() {         if (confirm("确定要删除吗?")) {          ...

  2. WCF 远程服务器返回了意外响应: (400) Bad Request。

    WCF 端  <system.web> <httpRuntime maxRequestLength="2147483647" /> </system. ...

  3. 【python】判断字符串以什么开头或结尾

    项目中用到python判断一个字符串是否以某个字符串结尾,比如,筛选一个目录下所有以.mp4结尾的文件. >>> item = "demo.mp4" >&g ...

  4. LeetCode：旋转图像【48】

    LeetCode:旋转图像[48] 题目描述 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使 ...

  5. Loadrunder之脚本篇——关联

    关联的原理 关联也属于一钟特殊的参数化.一般参数化的参数来源于一个文件.一个定义的table.通过sql写的一个结果集等,但关联所获得的参数是服务器响应请求所返回的一个符合条件的.动态的值. 例子:常 ...

  6. C++友元概念

    采用类的机制后实现了数据的隐藏与封装,类的数据成员一般定义为私有成员,成员函数一般定义为公有的,依此提供类与外界间的通信接口. 但是,有时需要定义一些函数,这些函数不是类的一部分,但又需要频繁地访问类 ...

  7. Shell编程之运算

    一.变量的数值计算 1.算术运算符 常用的运算符号 常用的运算命令 (1)双小括号 基本语法 1)利用"(())"进行简单运算 [root@codis-178 ~]# echo $ ...

  8. canvas 视频音乐播放器

    canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img ...

  9. Web项目java.lang.OutOfMemoryError: PermGen space异常解决

    接手一个新的Web项目,编译运行(Tomcat版本为7),运行的时候报出了java.lang.OutOfMemoryError: PermGen space的异常,搜了一下这样解释:   PermGe ...

  10. java写出图形界面

    1. 做出简单的窗体 package javaGUI; import java.awt.BorderLayout; import java.awt.Color; import javax.swing. ...