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

【JavaScript】动态表格

news 2026/3/29 12:34:56

🎊专栏【 前端易错合集】

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

🎆音乐分享【如愿】

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

🍔介绍

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

 

🍔代码

<!-- 创建一个基本的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

021工程微服务治理实战：Spring Cloud Alibaba 2024 全景落地指南

工程微服务治理实战&#xff1a;Spring Cloud Alibaba 2024 全景落地指南 在工程行业数字化转型的深水区&#xff0c;我们面临着独特的技术挑战&#xff1a;一个大型地产项目往往涉及设计、采购、施工、监理、成本、营销等十几个业务域&#xff0c;服务调用链路复杂&#xff1b…...

编程新知 2026/3/29 11:35:26

LLaMA-Factory推理性能优化指南：如何用vLLM和量化技术提升3倍吞吐量

LLaMA-Factory推理性能优化实战&#xff1a;从参数调优到量化部署 当你的LLaMA-Factory模型推理请求从每秒10次飙升到1000次时&#xff0c;服务器突然开始报警——显存爆满、响应延迟激增、API错误率直线上升。这不是灾难片的开场&#xff0c;而是每个AI工程师终将面对的性能瓶…...

编程新知 2026/3/29 11:29:19

Step3-VL-10B在STM32嵌入式开发中的应用：图像识别实战

Step3-VL-10B在STM32嵌入式开发中的应用&#xff1a;图像识别实战 如何在资源受限的嵌入式设备上实现高质量的图像识别&#xff1f;本文通过Step3-VL-10B模型在STM32上的实战应用&#xff0c;为你揭示轻量级视觉模型的部署奥秘。 1. 为什么选择Step3-VL-10B用于STM32开发 STM3…...

编程新知 2026/3/29 11:01:06

如何从零开始构建中国象棋AlphaZero AI：完整实战指南与进阶技巧

如何从零开始构建中国象棋AlphaZero AI&#xff1a;完整实战指南与进阶技巧 【免费下载链接】ChineseChess-AlphaZero Implement AlphaZero/AlphaGo Zero methods on Chinese chess. 项目地址: https://gitcode.com/gh_mirrors/ch/ChineseChess-AlphaZero 想要打造一个能…...

编程新知 2026/3/29 10:53:04

LaTeX algorithm2e避坑指南：为什么你的\tcp*注释后面总多个分号？

LaTeX algorithm2e避坑指南&#xff1a;为什么你的\tcp*注释后面总多个分号&#xff1f; 第一次在LaTeX中用algorithm2e写算法伪代码时&#xff0c;很多人会被\tcp*这个看似简单的注释命令坑到——明明只是想加个注释&#xff0c;结果代码末尾莫名其妙多出个分号&#xff0c;排…...

编程新知 2026/3/29 10:45:00

开源网页监控工具changedetection.io：实时追踪网页变化的全方位解决方案

开源网页监控工具changedetection.io&#xff1a;实时追踪网页变化的全方位解决方案 【免费下载链接】changedetection.io The best and simplest free open source website change detection, website watcher, restock monitor and notification service. Restock Monitor, c…...

编程新知 2026/3/29 10:45:00

L1-012 计算指数、L1-013 计算阶乘和、 L1-014 简单题、 L1-015 跟奥巴马一起画方块、 L1-016 查验身份证

L1-012 计算指数、L1-013 计算阶乘和、L1-014 简单题、 L1-015 跟奥巴马一起画方块、 L1-016 查验身份证L1-012 计算指数题目描述输入格式输出格式输入样例输出样例解题思路C 代码双引号 " " 的作用拼接过程示例L1-013 计算阶乘和题目描述输入格式输出格式输入样例输…...

编程新知 2026/3/29 10:18:21

JIT编译延迟高达2.3秒？紧急修复Python 3.14.0b3中`--jit-threshold=0`参数失效Bug的3种绕行方案（含补丁级patch）

第一章&#xff1a;JIT编译延迟高达2.3秒&#xff1f;紧急修复Python 3.14.0b3中--jit-threshold0参数失效Bug的3种绕行方案&#xff08;含补丁级patch&#xff09; Python 3.14.0b3 引入的自适应JIT编译器在启用 --jit-threshold0 时未能立即触发热路径编译&#xff0c;导致首…...

编程新知 2026/3/29 10:16:20

SAC算法实战：用PyTorch实现自动驾驶控制（附完整代码）

SAC算法实战&#xff1a;用PyTorch构建自动驾驶控制系统 在自动驾驶技术快速发展的今天&#xff0c;强化学习已成为解决复杂决策问题的有力工具。而Soft Actor-Critic&#xff08;SAC&#xff09;算法凭借其在连续动作空间中的卓越表现&#xff0c;正在成为自动驾驶控制领域的新…...

编程新知 2026/3/29 9:06:00

如何在Linux系统上快速配置BepInEx：Unity游戏插件框架的完整指南

如何在Linux系统上快速配置BepInEx&#xff1a;Unity游戏插件框架的完整指南 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx是一款专业的Unity/XNA游戏补丁和插件框架&…...

编程新知 2026/3/29 7:19:23