用javascript写一个动态表，第一行居中为“技术网络科考勤表”，第二行居中为年月，年的选择范围为2022年到2099年，月的选择范围为1-12月，根据当年闰年还是平年，可生成2月天数。第三行从左到右根据年月生成当月日期，第四行根据第三行生成当星期几。此表格第一列为人名，分别为渠际时、陈海峰、梁胜玉、袁凯、侯博文、孙逍遥、郭智豪、杨沐松。，中间内容分为三列，分别为“早”、“行政班”、“生产班”、“夜班”。每个里面可选择√输入。最后一列统计出此行输入√天数。

时间: 2024-03-15 17:47:58 浏览: 13

好的，以下是使用 JavaScript 实现的动态表格代码： ```html <!DOCTYPE html> <html> <head> <title>技术网络科考勤表</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: center; } </style> </head> <body> <table> <thead> <tr> <th colspan="7">技术网络科考勤表</th> </tr> <tr> <th colspan="7"> <select id="year"></select> 年 <select id="month"></select> 月 </th> </tr> <tr id="dateRow"></tr> <tr id="dayOfWeekRow"></tr> <tr> <th>姓名</th> <th>早</th> <th>行政班</th> <th>生产班</th> <th>夜班</th> <th>统计</th> </tr> </thead> <tbody> <tr> <td>渠际时</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> <tr> <td>陈海峰</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> <tr> <td>梁胜玉</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> <tr> <td>袁凯</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> <tr> <td>侯博文</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> <tr> <td>孙逍遥</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> <tr> <td>郭智豪</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> <tr> <td>杨沐松</td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td><input type="checkbox" class="day"></td> <td class="total"></td> </tr> </tbody> </table> <script> // 获取年月的下拉框 const yearSelect = document.getElementById("year"); const monthSelect = document.getElementById("month"); // 获取日期行和星期行 const dateRow = document.getElementById("dateRow"); const dayOfWeekRow = document.getElementById("dayOfWeekRow"); // 获取天数输入框和统计列 const days = document.querySelectorAll(".day"); const totalCols = document.querySelectorAll(".total"); // 初始化年份下拉框 for (let year = 2022; year <= 2099; year++) { const option = document.createElement("option"); option.value = year; option.text = year; yearSelect.appendChild(option); } // 初始化月份下拉框 for (let month = 1; month <= 12; month++) { const option = document.createElement("option"); option.value = month; option.text = month; monthSelect.appendChild(option); } // 更新日期和星期 function updateDateAndDayOfWeek() { // 获取当前选择的年月 const year = parseInt(yearSelect.value); const month = parseInt(monthSelect.value); // 计算当月天数 let daysInMonth; if (month === 2) { if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { daysInMonth = 29; } else { daysInMonth = 28; } } else if ([4, 6, 9, 11].includes(month)) { daysInMonth = 30; } else { daysInMonth = 31; } // 更新日期行和星期行 dateRow.innerHTML = ""; dayOfWeekRow.innerHTML = ""; for (let day = 1; day <= daysInMonth; day++) { const dateCell = document.createElement("th"); dateCell.textContent = day; dateRow.appendChild(dateCell); const dayOfWeekCell = document.createElement("td"); dayOfWeekCell.textContent = new Date(year, month - 1, day).toLocaleDateString("zh-CN", {weekday: "short"}); dayOfWeekRow.appendChild(dayOfWeekCell); } } // 统计每个人的√天数 function updateTotal() { totalCols.forEach(totalCol => { const daysChecked = Array.from(totalCol.parentElement.querySelectorAll(".day")).filter(day => day.checked); totalCol.textContent = daysChecked.length; }); } // 监听年份和月份的变化，更新日期和星期 yearSelect.addEventListener("change", updateDateAndDayOfWeek); monthSelect.addEventListener("change", updateDateAndDayOfWeek); // 监听√天数的变化，更新统计 days.forEach(day => { day.addEventListener("change", updateTotal); }); // 初始化表格 updateDateAndDayOfWeek(); updateTotal(); </script> </body> </html> ``` 希望这个代码可以帮助你完成需求，如果有任何问题，请随时提出。

相关推荐

JavaScript中的有限状态机，第1部分:设计一个小部件

javascript写的一个表单动态输入提示的代码

JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版

用JavaScript生成一个4行10列的表格，第一列每格的宽度为三倍，在网页居中显示

帮我写一个JavaScript的以任意一个字母开头，第二个为符号结尾的正则表达式

请帮我写一个动态年月日时分秒使用http或者JavaScript

请帮我写一个动态刷新年月日时分秒使用http或者JavaScript

用javascript写一个乘法表

如何获取一个有id值为showTable的table表格的表头，然后再获取表头的第二个属性

如何获取一个有id值为showTable的table表格的表头，然后再获取表头的第二个th

用JavaScript 编写 将一个4行3列的二维数组array1转置为3行4列的新数组array2。

用javascript写一个九九乘法表

用javascript 写一个动态网站

用javascript编写asp应用--第一课--通览

JSP动态网页设计技术教程第章HTML和JavaScript完美版资料.ppt

harvest-helper:一个 Javascript 文件，它为harvestapp.com 时间表网络应用程序添加颜色和箭头键导航

CountUpBy:取两个数字，一个数字为1，第二个数字为该数字的倍数

最新推荐

（更新至2022年）城镇男性就业人员调查周平均工作时间.xls

各地区技工院校综合情况(2022年).xls

基于matlab实现样本熵算法，可用于提取生理信号的特征参数

蜂网-SCM车销访销业务.pptx

数据更新至2020年国民经济主要指标一览表.xls

RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz

管理建模和仿真的文件

实现实时数据湖架构：Kafka与Hive集成

输出删除n个数字，使得被删后的数字最小

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

JavaScript talbe表中指定位置插入一行的实现代码脚本之家修正版

用JavaScript 编写将一个4行3列的二维数组array1转置为3行4列的新数组array2。