当前位置： 首页 > news >正文

【JavaScript】动态表格

news 2025/11/6 15:59:29

🎊专栏【 前端易错合集】

🍔喜欢的诗句：更喜岷山千里雪 三军过后尽开颜。

🎆音乐分享【如愿】

大一同学小吉，欢迎并且感谢大家指出我的问题🥰

🍔介绍

就是在输入框中输入数字后，再按下按钮，系统会自动出现表格

 

🍔代码

<!-- 创建一个基本的HTML页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 定义文档的字符集 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 指定用于Internet Explorer的最新版本 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 使页面自适应不同的设备尺寸 -->
  <title>Document</title>
  <!-- 设置页面的标题 -->
  
  <!-- 定义表格和d1的样式 -->
  <style>
    fieldset,#d1 {
      padding: 10px;
      width: 300px;
      margin: 0 auto;
    }
  </style>
  
  <!-- 定义JavaScript代码，用于创建HTML表格 -->
  <script type="text/javascript">
    function createTable(){
      n=1;
      var str="<table width='100%' border='1' cellspacing='0' cellpadding='0'><tbody>";
      // 获取用户输入的行数和列数
      var r1=document.getElementById("row").value;
      var c1=document.getElementById("col").value;
      // 构建一个简单的HTML表格
      for(i=0;i<r1;i++)
      {
        str=str+"<tr align='center'>";
        for(j=0;j<c1;j++)
        {
          str=str+"<td>"+(n++)+"</td>";
        }
        str=str+"</tr>";
      }
      // 将生成的表格插入到id为“d1”的div元素中
      var d1=document.getElementById("d1");
      d1.innerHTML=str+"</tbody></table>";
    }
  </script>
</head>

<!-- 定义HTML表单和一个div元素 -->
<body>
  <form id="form1" name="form1" method="post" action="">
    <fieldset>
      <legend>按时</legend>
      
      <!-- 用户输入行数和列数 -->
      输入表格的行数:<input type="text" id="row" ><br>
      输入表格的列数:<input type="text" id="col" ><br>
      
      <!-- 单击按钮将生成表格 -->
      <input type="button" id="ok" value="产生表格" οnclick="createTable()"/>
    </fieldset>
  </form>
  
  <!-- 表格将插入到这个id为"d1"的div元素中 -->
  <div id="d1"></div>
</body>
</html>

🍔解释 

🎈为什么要用”str+“

"str+" 的作用是将字符串连接起来。在代码中，使用 "str+" 将每一行的 HTML 字符串拼接起来，最终生成完整的 HTML 表格。

在实现动态生成表格功能时，需要不断拼接 HTML 代码并不断更新页面内容。对于 JavaScript 来说，每次更新 HTML 代码都需要重新构建整个 HTML 结构，这非常费时且容易出错。而使用 "str+" 可以更加高效、方便地拼接字符串，目的是为了减少代码的复杂性和提高代码的执行效率。

因此，在上述代码中，使用 str+ 将表格的每一行 HTML 代码拼接起来，最终生成完整的 HTML 表格，并将其插入到 id 为 "d1" 的 div 元素中。

🎈d1.innerHTML

这个d1.innerHTML不能改为别的东西

d1.innerHTML 的作用是设置或获取指定元素中包含的 HTML 内容。在上述代码中，使用 d1.innerHTML 将包含完整 HTML 表格的字符串插入到 id 为 "d1" 的 div 元素中。

具体来说，d1 是一个代表 id 为 "d1" 的 div 元素的变量，在函数 createTable() 中使用 getElementById() 方法获取。然后，在生成完整的 HTML 表格的过程中，将其保存在一个名为 str 的 JavaScript 变量中。最后，将 str 中保存的 HTML 字符串使用 d1.innerHTML = str 的方式插入到 id 为 "d1" 的 div 元素中，从而实现将动态生成的表格显示在页面上的效果。

总之，使用 d1.innerHTML = str 可以非常方便地将动态生成的 HTML 代码插入到指定的元素中，从而实现动态修改网页内容的效果。

🥰如果大家有不明白的地方，或者文章有问题，欢迎大家在评论区讨论，指正🥰 

相关文章：

【JavaScript】动态表格

&#x1f38a;专栏【 前端易错合集】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; &#x1f354;介绍 就是在输入框中输入数字后&#xff0c;再按…...

编程日记 2023/4/30 9:38:29

Css如何优雅的实现抽奖转盘

如图&#xff0c;抽奖转盘&#xff0c;可以拆分为几部分&#xff1a; 1.底部大圆&#xff1b; 2.中间小圆&#xff1b; 3.扇形区&#xff1b; 4.扇形内部奖品区&#xff1b; 5.抽奖按钮&#xff1b; 6.点击抽奖按钮时旋转动效及逻辑&#xff1b; 这其中&#xff0c;扇形区&am…...

编程日记 2023/4/30 9:33:28

在Java的小问题

问题1&#xff1a;如何在Java中创建一个对象&#xff1f; 解决方法&#xff1a; 在Java中&#xff0c;要创建一个对象&#xff0c;需要以下步骤&#xff1a; 创建一个类&#xff0c;定义对象的属性和行为。在类中定义一个构造函数&#xff0c;用于初始化对象的属性。在程序中…...

编程日记 2023/6/1 11:12:11

HashMap的扩容机制、初始化容量大小的选择、容量为什么是2的次幂

前置知识 先来看看HashMap中的成员属性 解释&#xff1a; size当前的容器中Entry的数量&#xff0c;也就是当前K-V的数量loadFactory装载因子&#xff0c;用来衡量HashMap满的程度&#xff0c;loadFactory的默认值是0.75threshold临界值&#xff0c;当实际KV数量超过threshol…...

编程日记 2023/4/30 9:23:25

[jenkins自动化2]: linux自动化部署方式之流水线(下篇)

目录 1. 引言: 2. 进阶操作 流水线 -> 2.1 简介: -> 2.2 最终效果图展示: -> 2.3 有没有心动, 真的像流水线一样, 实现了一键部署启动 3. 实现方式 3.1 下载几个插件 3.2 创建流水线任务 3.3 点击配置 3.4 根据流水线语法 写一个简单的helloworld 3.5 执行…...

编程日记 2023/6/1 3:27:09

idea使用 ( 二 ) 创建java项目

3.创建java项目 3.1.创建普通java项目 3.1.1.打开创建向导 接 2.3.1.创建新的项目 也可以 从菜单选择建立项目 会打开下面的选择界面 3.1.2.不使用模板 3.1.3.设置项目名 Project name : 项目名 Project location : 项目存放的位置 确认创建 3.1.4.关闭tips 将 Dont s…...

编程日记 2023/5/31 9:18:45

RabbitMq-接收消息+redis消费者重复接收

在接触RammitMQ时&#xff0c;好多文章都说在配置中设置属性 # rabbitmq 配置 rabbitmq:host: xxx.xxx.xxx.xxxport: xxxxusername: xxxpassword: xxxxxx## 生产端配置# 开启发布确认,就是confirm模式. 消费端ack应答后,才将消息从队列中删除#确认消息已发送到队列(Queue)pub…...

编程日记 2023/4/30 9:08:22

Orangepi Zero2 全志H616简介

为什么学 学习目标依然是Linux 系统 &#xff0c;平台是 ARM 架构 蜂巢快递柜&#xff0c;配送机器人&#xff0c;这些应用场景用C51,STM32单片机无法实现 第三方介入库的局限性&#xff0c;比如刷脸支付和公交车收费设备需要集成支付宝SDK&#xff0c;提供的libalipay.so 是…...

编程日记 2023/4/30 9:03:20

Golang每日一练(leetDay0047)

目录 138. 复制带随机指针的链表 Copy List with Random-pointer &#x1f31f;&#x1f31f; 139. 单词拆分 Word Break &#x1f31f;&#x1f31f; 140. 单词拆分 II Word Break II &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &…...

编程日记 2023/4/30 8:58:19

HCL Nomad Web 1.0.7发布和新功能验证

大家好&#xff0c;才是真的好。 要问在HCL Notes/Domino系列产品中&#xff0c;谁更新得最快&#xff0c;那么答案一定是HCL Nomad Web。 你看上图右边&#xff0c;从1.0.1更新到1.0.7&#xff0c;都没花多少时间。 从HCL Nomad Web 1.0.5版本开始&#xff0c;可以支持直接…...

编程日记 2023/4/30 8:53:18

春招网申简历填写三技巧

网申第一关很重要&#xff0c;不夸张的说网申决定了你的笔试机会&#xff0c;从如信银行考试中心了解到&#xff0c;银行网申筛选过程中&#xff0c;有机器筛选人工筛选两道程序&#xff0c;掌握填写技巧后对提升简历通过率有较大帮助&#xff0c;一定要把握住&#xff0c;关于…...

编程日记 2023/4/30 8:48:17

计算机网络基础知识总结

经过学习我们可以知道: 关于计算机网络: ip地址端口号协议协议分层TCP五层协议协议封装两台计算机之间的通信 目录 ip地址 端口号 协议 协议分层 五层协议体系结构 (1) 应用层 (2) 运输层 (3) 网络层 (4)数据链路层 (5)物理层 封装&分用 两台主机之间的通信 …...

编程日记 2023/4/30 8:43:16

（下）苹果有开源，但又怎样呢？

一开始&#xff0c;因为 MacOS X &#xff0c;苹果与 FreeBSD 过往从密&#xff0c;不仅挖来 FreeBSD 创始人 Jordan Hubbard&#xff0c;更是在此基础上开源了 Darwin。但是&#xff0c;苹果并没有给予 Darwin 太多关注&#xff0c;作为苹果的首个开源项目&#xff0c;它算不上…...

编程日记 2023/4/30 8:38:15

row_number 和 cte 使用实例：考场监考安排

row_number 和 cte 使用实例&#xff1a;考场监考安排 考场监考安排使用 cte 模拟两个表的原始数据使用 master..spt_values 进行数据填充优先安排时长较长的考试使用 cte 安排第一个需要安排的科目统计老师已有的监考时长尝试使用 cte 递归&#xff0c;进行下一场考试安排&…...

编程日记 2023/4/30 8:33:14

2023天梯赛记录

文章目录 L2-001 紧急救援L2-002 链表去重L2-004 这是二叉搜索树吗&#xff1f;L2-005 集合相似度L2-006 树的遍历L2-007 家庭房产L2-010 排座位L2-011 玩转二叉树L2-012 关于堆的判断L2-013 红色警报L2-014 列车调度L2-016 愿天下有情人都是失散多年的兄妹L2-019 悄悄关注L2-0…...

编程日记 2023/4/30 8:28:13

被吐槽 GitHub仓 库太大，直接 600M 瘦身到 6M，这下舒服了

大家好&#xff0c;我是小富&#xff5e; 前言 忙里偷闲学习了点技术写了点demo代码&#xff0c;打算提交到我那 2000Star 的Github仓库上&#xff0c;居然发现有5个Issues&#xff0c;最近的一条日期已经是2022/8/1了&#xff0c;以前我还真没留意过这些&#xff0c;我这人懒…...

编程日记 2023/4/30 8:23:07

OpenGL（三）——着色器

目录 一、前言 二、Shader 2 Shader 2.1 顶点着色器 2.2 片段着色器 三、APP 2 Shader 四、顶点颜色属性 五、着色器类C 一、前言 着色器Shader是运行在GPU上的小程序&#xff0c;为图形渲染管线的某个特定部分而运行。各阶段着色器之间无法通信&#xff0c;只有输入和输…...

编程日记 2023/4/30 8:18:07

【MySQL】单表查询

一、表的准备 查询操作的SQL演示将基于下面这四张表进行&#xff0c;我们先创建好这四张数据表&#xff0c;并为其添加数据。 1、第一张表为部门表&#xff0c;名称为包含三个字段&#xff1a;部门编号&#xff08;deptno&#xff09;&#xff0c;部门名称&#xff08;dname&…...

编程日记 2023/4/30 8:13:05

第一章 安装Unity

使用Unity开发游戏的话&#xff0c;首先要安装Unity Hub和Unity Editor两个软件。大家可以去官方地址下载&#xff1a;https://unity.cn/releases/full/2020 &#xff08;这里我们选择的是2020版本&#xff09; Unity Hub 是安装 Unity Editor、创建项目、管理帐户和许可证的主…...

编程日记 2023/4/30 8:08:03

20230425----重返学习-vue项目-vue自定义指令-vue-cli的配置

day-057-fifty-seven-20230425-vue项目-vue自定义指令-vue-cli的配置 vue项目 vuex版 普通版纯axios&#xff1a;切换页面&#xff0c;就会重新发送一次ajax请求普通版升级&#xff1a;vuex版vuex的常用功能 vuex 数据通信vuex 缓存数据 前进后退&#xff0c;切换页面&#…...

编程日记 2023/4/30 8:03:02

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/11/3 23:03:39

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/11/3 2:08:02

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/10/25 12:55:59

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/10/29 23:40:59

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2025/11/1 0:37:01

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

编程新知 2025/10/30 5:22:20

【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

编程新知 2025/11/2 20:10:11

【系统架构设计师-2025上半年真题】综合知识-参考答案及部分详解（回忆版）

更多内容请见： 备考系统架构设计师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20~21题】【第…...

编程新知 2025/11/4 22:00:01