动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:

行:<input type="text" id="row" value="5"><br>
    列:<input type="text" id="col" value="10"><br>
    <button id="btn">生成</button>
    <div id="box"></div> <!--存放动态生成的表格-->

    1
    2
    3
    4

html结构写好之后,我们就需要写js代码,让其动态生成表格。js代码如下:

$("#btn").onclick = function () {
            var _col = $("#col").value,//获取列
                _row = $("#row").value;//获取行
            var _table = document.createElement("table");//创建表格
            for(var i = 0;i<_row;i++){
                var _tr = document.createElement("tr");//创建行
                for(var j = 0;j<_col;j++){
                    var _td = document.createElement("td");//创建列
                    _tr.appendChild(_td);
                }
                _table.appendChild(_tr);
            }
            $("#box").appendChild(_table);//添加表格

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118599567

JavaScript中动态生成表格的更多相关文章

  1. 【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍

    下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ================================= ...

  2. JavaScript基础7——动态生成表格

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. js动态生成表格

    动态生成表格           *创建一个页面:两个输入框和一个按钮 *代码和步骤                      /*                          1.得到输入的行 ...

  4. (转载)PHP 动态生成表格

    (转载)http://hi.baidu.com/shawns/item/c7d51f351c6a0482b711dba6 提要:PHP能够高效地生成HTML代码,其中,动态生成表格是实际应用中经常碰到 ...

  5. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  6. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  7. 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据

    动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格

  8. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. 测试脚本配置、ORM必知必会13条、双下划线查询、一对多外键关系、多对多外键关系、多表查询

    测试脚本配置 ''' 当你只是想测试django中的某一个文件内容 那么你可以不用书写前后端交互的形式而是直接写一个测试脚本即可 脚本代码无论是写在应用下的test.py还是单独开设py文件都可以 ' ...

  2. java基础知识-序列化/反序列化-gson基础知识

    以下内容来之官网翻译,地址 1.Gson依赖 1.1.Gradle/Android dependencies { implementation 'com.google.code.gson:gson:2 ...

  3. 十、包机制与JavaDoc

    一.包机制 为了更好的组织类,Java提供了包机制,用于区别类名的命名空间. 包语句的语句格式为: package pkg1[. pkg2[. pkg3...]]; 一般使用公司域名倒置作为包名:例如 ...

  4. 安卓记账本开发学习day3

    今天发现了新的错误 首先是AS警告杀毒系统对编译运行有影响,我目前只开了火绒,所以只需要在火绒里将SDK文件夹设置为信任即可 第二个错是在编译测试运行的时候,虚拟机能够正常打开,也launch suc ...

  5. Blazor 组件库 BootstrapBlazor 中Editor组件介绍

    组件介绍 Editor组件是对Summernote 组件的二次封装. 组件分为div模式和editor模式. 默认状态下editor模式的组件样子如下: 其代码如下: <Editor @bind ...

  6. 【openstack】红帽公开课笔记内容openstack

    overcloud节点自省失败(introspection) 节点自省--获取overcloud

  7. XCTF练习题---MISC---can_has_stdio?

    XCTF练习题---MISC---can_has_stdio? flag:flag{esolangs_for_fun_and_profit} 解题步骤: 1.观察题目,下载附件 2.打开发现是由tra ...

  8. dubbo发送过程编码失败,会唤醒发送线程吗?

    dubbo发送过程编码失败,会唤醒发送(客户端业务)线程吗?如何实现的? 在上篇文章 dubbo坑- No provider available for the service xxx 中,如果dub ...

  9. docker使用详解

    一.docker简介 docker 是一个开源的应用容器引擎,docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化 ...

  10. MyBatisPlus详解

    1.MyBatisPlus概述 需要的基础:MyBatis.Spring.SpringMVC 为什么要学习?MyBatisPlus可以节省我们大量工作时间,所有的CRUD代码它都可以自动化完成! 简介 ...