动态生成表格,首先需要输入并获取动态的数字,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. allure用法(一)-配置信息及基本用法

    allure是一个轻量级的,灵活的,支持多语言的测试报告工具 优点: 可以为dev/qa 提供 详尽的测试报告.测试步骤.日志 可以为管理层提供更好的统计报告 Java语言开发的 可以集成到jenki ...

  2. Bootstrap Blazor Table 组件(二)

    原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...

  3. 新手小白入门C语言第二章:基本语法

    1. 语句 C 语言的代码由一行行语句(statement)组成.语句就是程序执行的一个操作命令.C 语言规定,语句必须使用分号结尾,除非有明确规定可以不写分号. 如: int x = 1; 这就是一 ...

  4. 2021.11.02 eleveni的水省选题的记录

    2021.11.02 eleveni的水省选题的记录 因为eleveni比较菜,所以eleveni决定从绿题开始水 --实际上菜菜的eleveni连绿题都不一定能水过/忍不住哭了 [P2217 HAO ...

  5. Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  6. docker容器的持久化存储:Volume

    独立于docker容器的持久化存储: 法(1):自动将服务器文件夹挂载到容器内部文件夹/usr/share/nginx/html,这样只修改服务器文件夹下的内容即可对应修改容器内部文件夹的内容 将服务 ...

  7. Linux-ssh-key验证

    ssh登录验证方式介绍 ssh服务登录的常用验证方式 用户/口令 基于密钥 基于用户和口令登录验证 客户端发起ssh请求,服务器会把自己的公钥发送给用户 用户会根据服务器发来的公钥对密码进行加密 加密 ...

  8. 分享我做Dotnet9博客网站时积累的一些资料

    从2019年使用WordPress搭建Dotnet9网站,到现在手撸代码开发,介绍中间使用的一些资源,绝无保留,希望对大家有用. 1. 申请域名.搭建WordPress网站 时间点:2019年11月 ...

  9. 干货 | Keepalived高可用服务配置实例

    一个执着于技术的公众号 Keepalived系列导读 Keepalived入门学习 keepalived安装及配置文件详解 前言 在前面的章节中,我们学习了Keepalived简介.原理.以及Keep ...

  10. CEPH-5:ceph集群基本概念与管理

    ceph集群基本概念与管理 ceph集群基本概念 ceph集群整体结构图 名称 作用 osd 全称Object Storage Device,主要功能是存储数据.复制数据.平衡数据.恢复数据等.每个O ...