用javascript写一个web动态表,第一行合并居中为“技术网络科考勤表”,第二行合并居中为年月,年的选择范围为2022年到2099年,月的选择范围为1-12月,根据当年闰年还是平年,可生成2月天数。第三行从第三列左到右根据年月生成当月日期,第四行从第三列从左到右根据第三行日期生成对应星期几。此表格第五行开始第一列为人名,分别为“渠际时”、“陈海峰”、“梁胜玉”、“袁凯”、“侯博文”、“孙逍遥”、“郭智豪”、“杨沐松”。第五行第二列往下,每个人名生成三行对应班次“行政班”、“生产班”、“夜班”,每个班次对应日期生成矩形方框输入,可以打√输入。第四行三十四列为“值班天数”,往下统计出对应人名输入√的天数。第四行三十五列为“带班”,从第五行三十五列每个表格生成下拉可选择人员“渠际时”、“陈海峰”、“梁胜玉”、“袁凯”、“侯博文”、“孙逍遥”、“郭智豪”、“杨沐松”。在表格末尾生成“提交保存”按钮,功能为保存当前表格数据。

时间: 2023-10-07 16:11:07 浏览: 162
好的,以下是我为您提供的JavaScript代码,可以生成您所需的动态表格: ```javascript // 创建表格 var table = document.createElement('table'); table.setAttribute('border', '1'); // 第一行 var row1 = document.createElement('tr'); var cell1 = document.createElement('td'); cell1.setAttribute('colspan', '12'); cell1.setAttribute('align', 'center'); cell1.innerHTML = '技术网络科考勤表'; row1.appendChild(cell1); table.appendChild(row1); // 第二行 var row2 = document.createElement('tr'); var cell2_1 = document.createElement('td'); cell2_1.setAttribute('colspan', '3'); cell2_1.setAttribute('align', 'center'); cell2_1.innerHTML = '年份:'; row2.appendChild(cell2_1); var cell2_2 = document.createElement('td'); cell2_2.setAttribute('colspan', '3'); cell2_2.setAttribute('align', 'center'); cell2_2.innerHTML = '月份:'; row2.appendChild(cell2_2); var cell2_3 = document.createElement('td'); cell2_3.setAttribute('colspan', '6'); cell2_3.setAttribute('align', 'center'); var yearSelect = document.createElement('select'); for (var i = 2022; i <= 2099; i++) { var option = document.createElement('option'); option.value = i; option.text = i + '年'; yearSelect.appendChild(option); } cell2_3.appendChild(yearSelect); var monthSelect = document.createElement('select'); for (var i = 1; i <= 12; i++) { var option = document.createElement('option'); option.value = i; option.text = i + '月'; monthSelect.appendChild(option); } cell2_3.appendChild(monthSelect); row2.appendChild(cell2_3); table.appendChild(row2); // 第三行 var row3 = document.createElement('tr'); var cell3_1 = document.createElement('td'); cell3_1.innerHTML = '序号'; row3.appendChild(cell3_1); var cell3_2 = document.createElement('td'); cell3_2.innerHTML = '姓名'; row3.appendChild(cell3_2); var cell3_3 = document.createElement('td'); cell3_3.innerHTML = '1'; row3.appendChild(cell3_3); // ...生成当月日期 var cell3_33 = document.createElement('td'); cell3_33.innerHTML = '31'; row3.appendChild(cell3_33); table.appendChild(row3); // 第四行 var row4 = document.createElement('tr'); var cell4_1 = document.createElement('td'); cell4_1.innerHTML = '星期'; row4.appendChild(cell4_1); var cell4_2 = document.createElement('td'); cell4_2.innerHTML = ' '; row4.appendChild(cell4_2); var cell4_3 = document.createElement('td'); cell4_3.innerHTML = '一'; row4.appendChild(cell4_3); // ...生成星期几 var cell4_33 = document.createElement('td'); cell4_33.innerHTML = '五'; row4.appendChild(cell4_33); table.appendChild(row4); // 第五行 var row5 = document.createElement('tr'); var cell5_1 = document.createElement('td'); cell5_1.innerHTML = '1'; row5.appendChild(cell5_1); var cell5_2 = document.createElement('td'); cell5_2.innerHTML = '渠际时'; row5.appendChild(cell5_2); var cell5_3 = document.createElement('td'); cell5_3.innerHTML = ' '; row5.appendChild(cell5_3); // ...生成各个人名 var cell5_33 = document.createElement('td'); cell5_33.innerHTML = '杨沐松'; row5.appendChild(cell5_33); table.appendChild(row5); // 第六行到第8行,生成班次和输入框 // 第9行 var row9 = document.createElement('tr'); var cell9_1 = document.createElement('td'); cell9_1.setAttribute('colspan', '34'); cell9_1.setAttribute('align', 'center'); cell9_1.innerHTML = '值班天数'; row9.appendChild(cell9_1); table.appendChild(row9); // 第10行 var row10 = document.createElement('tr'); var cell10_1 = document.createElement('td'); cell10_1.innerHTML = '1'; row10.appendChild(cell10_1); var cell10_2 = document.createElement('td'); cell10_2.innerHTML = '渠际时'; row10.appendChild(cell10_2); var cell10_3 = document.createElement('td'); cell10_3.setAttribute('colspan', '33'); // ...生成输入框 cell10_3.innerHTML = '<input type="checkbox">'; row10.appendChild(cell10_3); table.appendChild(row10); // 第11行到第13行,生成各个人名和输入框 // 第14行 var row14 = document.createElement('tr'); var cell14_1 = document.createElement('td'); cell14_1.setAttribute('colspan', '34'); cell14_1.setAttribute('align', 'center'); cell14_1.innerHTML = '带班'; row14.appendChild(cell14_1); table.appendChild(row14); // 第15行 var row15 = document.createElement('tr'); var cell15_1 = document.createElement('td'); cell15_1.innerHTML = '1'; row15.appendChild(cell15_1); var cell15_2 = document.createElement('td'); cell15_2.innerHTML = '渠际时'; row15.appendChild(cell15_2); var cell15_3 = document.createElement('td'); cell15_3.setAttribute('colspan', '33'); // ...生成下拉选择框 var select15 = document.createElement('select'); var option15_1 = document.createElement('option'); option15_1.value = '陈海峰'; option15_1.text = '陈海峰'; select15.appendChild(option15_1); // ...生成其他选项 cell15_3.appendChild(select15); row15.appendChild(cell15_3); table.appendChild(row15); // ...生成其他行 // 提交保存按钮 var saveButton = document.createElement('button'); saveButton.innerHTML = '提交保存'; // ...设置监听器,处理保存逻辑 document.body.appendChild(table); document.body.appendChild(saveButton); ``` 这段代码会生成一个符合您要求的表格,并且还包括一个提交保存按钮。您需要根据您的具体需求,补充保存按钮的逻辑。
阅读全文

相关推荐

大家在看

recommend-type

SCSI-ATA-Translation-3_(SAT-3)-Rev-01a

本资料是SAT协议,即USB转接桥。通过上位机直接发送命令给SATA盘。
recommend-type

Surface pro 7 SD卡固定硬盘X64驱动带数字签名

针对surface pro 7内置硬盘较小,外扩SD卡后无法识别成本地磁盘,本驱动让windows X64把TF卡识别成本地硬盘,并带有数字签名,无需关闭系统强制数字签名,启动时也不会出现“修复系统”的画面,完美,无毒副作用,且压缩文件中带有详细的安装说明,你只需按部就班的执行即可。本驱动非本人所作,也是花C币买的,现在操作成功了,并附带详细的操作说明供大家使用。 文件内容如下: surfacepro7_x64.zip ├── cfadisk.cat ├── cfadisk.inf ├── cfadisk.sys ├── EVRootCA.crt └── surface pro 7将SD卡转换成固定硬盘驱动.docx
recommend-type

实验2.Week04_通过Console线实现对交换机的配置和管理.pdf

交换机,console
recommend-type

景象匹配精确制导中匹配概率的一种估计方法

基于景象匹配制导的飞行器飞行前需要进行航迹规划, 就是在飞行区域中选择出一些匹配概率高的匹配 区, 作为相关匹配制导的基准, 由此提出了估计匹配区匹配概率的问题本文模拟飞行中匹配定位的过程定义了匹 配概率, 并提出了基准图的三个特征参数, 最后通过线性分类器, 实现了用特征参数估计匹配概率的目标, 并进行了实验验证
recommend-type

Low-cost high-gain differential integrated 60 GHz phased array antenna in PCB process

Low-cost high-gain differential integrated 60 GHz phased array antenna in PCB process

最新推荐

recommend-type

利用jquery给指定的table动态添加一行、删除一行的方法

例如,`$("#mytable tr").eq(0)`将选择第一行,`$("#mytable tr").eq(-1)`将选择最后一行。`nth-child(n)`选择器可以用来选择具有特定顺序的孩子元素,例如`$("#mytable tr").find("td:nth-child(1)")`选择每行的第...
recommend-type

web前端第三版习题参考答案_.docx.docx

HTML,全称为HyperText Markup Language,即超...这些都是Web前端开发中不可或缺的部分,对于理解和创建基本的网页内容至关重要。通过练习和实际操作,可以进一步巩固这些知识点,并为更深入的前端学习打下坚实的基础。
recommend-type

JS实现动态修改table及合并单元格的方法示例

在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...
recommend-type

layui实现点击按钮给table添加一行

然而,当使用 Layui 的动态表格(如示例中的第二种方式)时,这种方法将无法工作,因为 Layui 会根据 `lay-data` 属性和 `table.render()` 方法来自动生成表格结构和处理数据。在这种情况下,我们需要利用 Layui 的...
recommend-type

微信小程序一周时间表功能实现

这里使用了一个名为`GetPeriod`的自定义模块,该模块包含`formatDate`方法,用于格式化日期字符串。 `GetPeriod.formatDate`方法的具体实现未给出,但通常会将日期对象转换成指定格式的字符串,如"YYYY-MM-DD"。...
recommend-type

Cyclone IV硬件配置详细文档解析

Cyclone IV是Altera公司(现为英特尔旗下公司)的一款可编程逻辑设备,属于Cyclone系列FPGA(现场可编程门阵列)的一部分。作为硬件设计师,全面了解Cyclone IV配置文档至关重要,因为这直接影响到硬件设计的成功与否。配置文档通常会涵盖器件的详细架构、特性和配置方法,是设计过程中的关键参考材料。 首先,Cyclone IV FPGA拥有灵活的逻辑单元、存储器块和DSP(数字信号处理)模块,这些是设计高效能、低功耗的电子系统的基石。Cyclone IV系列包括了Cyclone IV GX和Cyclone IV E两个子系列,它们在特性上各有侧重,适用于不同应用场景。 在阅读Cyclone IV配置文档时,以下知识点需要重点关注: 1. 设备架构与逻辑资源: - 逻辑单元(LE):这是构成FPGA逻辑功能的基本单元,可以配置成组合逻辑和时序逻辑。 - 嵌入式存储器:包括M9K(9K比特)和M144K(144K比特)两种大小的块式存储器,适用于数据缓存、FIFO缓冲区和小规模RAM。 - DSP模块:提供乘法器和累加器,用于实现数字信号处理的算法,比如卷积、滤波等。 - PLL和时钟网络:时钟管理对性能和功耗至关重要,Cyclone IV提供了可配置的PLL以生成高质量的时钟信号。 2. 配置与编程: - 配置模式:文档会介绍多种配置模式,如AS(主动串行)、PS(被动串行)、JTAG配置等。 - 配置文件:在编程之前必须准备好适合的配置文件,该文件通常由Quartus II等软件生成。 - 非易失性存储器配置:Cyclone IV FPGA可使用非易失性存储器进行配置,这些配置在断电后不会丢失。 3. 性能与功耗: - 性能参数:配置文档将详细说明该系列FPGA的最大工作频率、输入输出延迟等性能指标。 - 功耗管理:Cyclone IV采用40nm工艺,提供了多级节能措施。在设计时需要考虑静态和动态功耗,以及如何利用各种低功耗模式。 4. 输入输出接口: - I/O标准:支持多种I/O标准,如LVCMOS、LVTTL、HSTL等,文档会说明如何选择和配置适合的I/O标准。 - I/O引脚:每个引脚的多功能性也是重要考虑点,文档会详细解释如何根据设计需求进行引脚分配和配置。 5. 软件工具与开发支持: - Quartus II软件:这是设计和配置Cyclone IV FPGA的主要软件工具,文档会介绍如何使用该软件进行项目设置、编译、仿真以及调试。 - 硬件支持:除了软件工具,文档还可能包含有关Cyclone IV开发套件和评估板的信息,这些硬件平台可以加速产品原型开发和测试。 6. 应用案例和设计示例: - 实际应用:文档中可能包含针对特定应用的案例研究,如视频处理、通信接口、高速接口等。 - 设计示例:为了降低设计难度,文档可能会提供一些设计示例,它们可以帮助设计者快速掌握如何使用Cyclone IV FPGA的各项特性。 由于文件列表中包含了三个具体的PDF文件,它们可能分别是针对Cyclone IV FPGA系列不同子型号的特定配置指南,或者是覆盖了特定的设计主题,例如“cyiv-51010.pdf”可能包含了针对Cyclone IV E型号的详细配置信息,“cyiv-5v1.pdf”可能是版本1的配置文档,“cyiv-51008.pdf”可能是关于Cyclone IV GX型号的配置指导。为获得完整的技术细节,硬件设计师应当仔细阅读这三个文件,并结合产品手册和用户指南。 以上信息是Cyclone IV FPGA配置文档的主要知识点,系统地掌握这些内容对于完成高效的设计至关重要。硬件设计师必须深入理解文档内容,并将其应用到实际的设计过程中,以确保最终产品符合预期性能和功能要求。
recommend-type

【WinCC与Excel集成秘籍】:轻松搭建数据交互桥梁(必读指南)

# 摘要 本论文深入探讨了WinCC与Excel集成的基础概念、理论基础和实践操作,并进一步分析了高级应用以及实际案例。在理论部分,文章详细阐述了集成的必要性和优势,介绍了基于OPC的通信机制及不同的数据交互模式,包括DDE技术、VBA应用和OLE DB数据访问方法。实践操作章节中,着重讲解了实现通信的具体步骤,包括DDE通信、VBA的使
recommend-type

华为模拟互联地址配置

### 配置华为设备模拟互联网IP地址 #### 一、进入接口配置模式并分配IP地址 为了使华为设备能够模拟互联网连接,需先为指定的物理或逻辑接口设置有效的公网IP地址。这通常是在广域网(WAN)侧执行的操作。 ```shell [Huawei]interface GigabitEthernet 0/0/0 # 进入特定接口配置视图[^3] [Huawei-GigabitEthernet0/0/0]ip address X.X.X.X Y.Y.Y.Y # 设置IP地址及其子网掩码,其中X代表具体的IPv4地址,Y表示对应的子网掩码位数 ``` 这里的`GigabitEth
recommend-type

Java游戏开发简易实现与地图控制教程

标题和描述中提到的知识点主要是关于使用Java语言实现一个简单的游戏,并且重点在于游戏地图的控制。在游戏开发中,地图控制是基础而重要的部分,它涉及到游戏世界的设计、玩家的移动、视图的显示等等。接下来,我们将详细探讨Java在游戏开发中地图控制的相关知识点。 1. Java游戏开发基础 Java是一种广泛用于企业级应用和Android应用开发的编程语言,但它的应用范围也包括游戏开发。Java游戏开发主要通过Java SE平台实现,也可以通过Java ME针对移动设备开发。使用Java进行游戏开发,可以利用Java提供的丰富API、跨平台特性以及强大的图形和声音处理能力。 2. 游戏循环 游戏循环是游戏开发中的核心概念,它控制游戏的每一帧(frame)更新。在Java中实现游戏循环一般会使用一个while或for循环,不断地进行游戏状态的更新和渲染。游戏循环的效率直接影响游戏的流畅度。 3. 地图控制 游戏中的地图控制包括地图的加载、显示以及玩家在地图上的移动控制。Java游戏地图通常由一系列的图像层构成,比如背景层、地面层、对象层等,这些图层需要根据游戏逻辑进行加载和切换。 4. 视图管理 视图管理是指游戏世界中,玩家能看到的部分。在地图控制中,视图通常是指玩家的视野,它需要根据玩家位置动态更新,确保玩家看到的是当前相关场景。使用Java实现视图管理时,可以使用Java的AWT和Swing库来创建窗口和绘制图形。 5. 事件处理 Java游戏开发中的事件处理机制允许对玩家的输入进行响应。例如,当玩家按下键盘上的某个键或者移动鼠标时,游戏需要响应这些事件,并更新游戏状态,如移动玩家角色或执行其他相关操作。 6. 游戏开发工具 虽然Java提供了强大的开发环境,但通常为了提升开发效率和方便管理游戏资源,开发者会使用一些专门的游戏开发框架或工具。常见的Java游戏开发框架有LibGDX、LWJGL(轻量级Java游戏库)等。 7. 游戏地图的编程实现 在编程实现游戏地图时,通常需要以下几个步骤: - 定义地图结构:包括地图的大小、图块(Tile)的尺寸、地图层级等。 - 加载地图数据:从文件(如图片或自定义的地图文件)中加载地图数据。 - 地图渲染:在屏幕上绘制地图,可能需要对地图进行平滑滚动(scrolling)、缩放(scaling)等操作。 - 碰撞检测:判断玩家或其他游戏对象是否与地图中的特定对象发生碰撞,以决定是否阻止移动等。 - 地图切换:实现不同地图间的切换逻辑。 8. JavaTest01示例 虽然提供的信息中没有具体文件内容,但假设"javaTest01"是Java项目或源代码文件的名称。在这样的示例中,"javaTest01"可能包含了一个或多个类(Class),这些类中包含了实现地图控制逻辑的主要代码。例如,可能存在一个名为GameMap的类负责加载和渲染地图,另一个类GameController负责处理游戏循环和玩家输入等。 通过上述知识点,我们可以看出实现一个简单的Java游戏地图控制不仅需要对Java语言有深入理解,还需要掌握游戏开发相关的概念和技巧。在具体开发过程中,还需要参考相关文档和API,以及可能使用的游戏开发框架和工具的使用指南。
recommend-type

【超市销售数据深度分析】:从数据库挖掘商业价值的必经之路

# 摘要 本文全面探讨了超市销售数据分析的方法与应用,从数据的准备、预处理到探索性数据分析,再到销售预测与市场分析,最后介绍高级数据分析技术在销售领域的应用。通过详细的章节阐述,本文着重于数据收集、清洗、转换、可视化和关联规则挖掘等关键步骤。