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

【JavaScript】动态表格

news 2026/5/20 5:54:52

🎊专栏【 前端易错合集】

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

🎆音乐分享【如愿】

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

🍔介绍

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

 

🍔代码

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

告别FTP！用Go写的Filebrowser，一个命令搞定Windows/Linux跨平台文件管理

告别FTP&#xff01;用Go语言构建的Filebrowser&#xff0c;一条命令实现全平台文件管理革命 在服务器管理和跨平台文件共享的日常工作中&#xff0c;传统FTP工具早已显露出诸多不便&#xff1a;复杂的客户端配置、不直观的界面操作、安全隐患频发。而现代开发者需要的&#xf…...

编程新知 2026/5/20 5:33:03

VS2019编译OpenCASCADE 7.6.0避坑实录：从custom.bat修改到Demo测试，一次搞定

VS2019编译OpenCASCADE 7.6.0全流程避坑指南 在三维建模与CAD开发领域&#xff0c;OpenCASCADE作为开源几何内核引擎&#xff0c;其强大的BRep建模和STEP文件处理能力备受开发者青睐。然而对于初次接触OCC的Windows平台开发者而言&#xff0c;在Visual Studio 2019环境下完成从…...

编程新知 2026/5/20 5:32:58

LongWriter实战教程：从零开始构建你的专属写作AI

LongWriter实战教程&#xff1a;从零开始构建你的专属写作AI 【免费下载链接】LongWriter [ICLR 2025] LongWriter: Unleashing 10,000 Word Generation from Long Context LLMs 项目地址: https://gitcode.com/gh_mirrors/lo/LongWriter LongWriter是一款基于长上下文L…...

编程新知 2026/5/20 5:14:02

CANN/cannbot-skills模型推理融合算子优化

【免费下载链接】cannbot-skills CANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体&#xff0c;本仓库为其提供可复用的 Skills 模块。 项目地址: https://gitcode.com/cann/cannbot-skills name: model-infer-fusion description: 基于 PyTorch 框架的昇腾 NPU…...

编程新知 2026/5/20 4:55:32

从提示词到成片：2026年AI视频工作流效率革命——Top 5工具的Prompt工程兼容度、重绘响应延迟与跨平台资产复用率实测

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;2026年AI视频生成工具全景图谱与评测方法论 截至2026年&#xff0c;AI视频生成已从实验性原型迈入工业化应用阶段&#xff0c;工具生态呈现“三极分化”格局&#xff1a;消费级轻量工具专注短视频创意提…...

编程新知 2026/5/20 4:30:10

RAG检索体系①【第十一篇】：混合检索架构（BM25+向量+过滤），工业级召回落地方案

生产级 RAG 避坑实战合集【第十一篇】文章简介&#xff1a;前十篇我们彻底打通数据层改写层&#xff1a;文档清洗、Chunk切块、元数据、生命周期、Query双层改写。绝大多数人做完这些&#xff0c;直接无脑上单向量检索。线上投产全部翻车。本文直击行业痛点&#xff1a;纯向量检…...

编程新知 2026/5/20 4:05:13

企业Agent落地：从0到1搭建员工Agent体系

一、项目背景 某中型企业在数字化转型过程中遇到以下痛点&#xff1a; 合同审批流程平均耗时3天&#xff0c;效率低下员工每天约30%的时间花在重复操作上流程规则散落在员工经验中&#xff0c;难以标准化缺乏统一的操作审计和权限管理 二、落地路径 阶段一&#xff1a;验证…...

编程新知 2026/5/20 3:17:54

企业级AI Agent实战：如何解决异常考勤处理滞后与薪资核算难题？

摘要&#xff1a; 在2026年企业数字化转型步入深水区的今天&#xff0c;考勤管理与薪资核算的脱节已成为制约组织效能的隐形枷锁。作为一名在企业架构领域摸爬滚打15年的架构师&#xff0c;我观察到无数企业陷入“异常考勤处理滞后、员工满意度低、薪资核算频错”的恶性循环。传…...

编程新知 2026/5/20 2:12:27

主从结合，安全互联：Anybus工业通信解决方案全栈升级

HMS亮相2026 PROFINET技术路演杭州站&#xff0c;展出全新Anybus SoM及全栈PROFINET方案&#xff0c;助力设备商应对CRA与机械法规双重合规挑战。 5月14日&#xff0c;由PI China主办的2026 PROFINET技术路演&#xff08;杭州站&#xff09;在西玥酒店圆满举行。HMS华东区OEM销…...

编程新知 2026/5/20 1:55:26

我的第一个CANOpen主站：手把手教你用CanFestival-3源码配置心跳、SYNC和PDO映射

我的第一个CANOpen主站&#xff1a;手把手教你用CanFestival-3源码配置心跳、SYNC和PDO映射 当你第一次面对工业现场总线协议时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。CANOpen作为工业自动化领域的"普通话"&#xff0c;其主站开发往往是工程师进阶路上的…...

编程新知 2026/5/20 1:14:32