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

时间: 2023-10-07 11:11:07 浏览: 81

好的，这是一个比较复杂的需求，需要用到HTML、CSS和JavaScript来实现。我将会给出一个简单的实现方案，你可以根据自己的需求进行修改和优化。首先，我们需要创建一个HTML页面，其中包含一个表格，用于展示考勤信息。代码如下： ```html <!DOCTYPE html> <html> <head> <title>技术网络科考勤表</title> <style> table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 5px; text-align: center; } .center { text-align: center; } .month { width: 50px; } .date { width: 30px; } .checkbox { width: 20px; height: 20px; } .select { width: 100%; } </style> </head> <body> <table> <thead> <tr> <th colspan="35" class="center">技术网络科考勤表</th> </tr> <tr> <th colspan="2" class="center">年月</th> <th colspan="33" class="center">日期</th> </tr> <tr> <th>人名</th> <th>时间</th> <th class="month">1</th> <th class="month">2</th> <th class="month">3</th> <th class="month">4</th> <th class="month">5</th> <th class="month">6</th> <th class="month">7</th> <th class="month">8</th> <th class="month">9</th> <th class="month">10</th> <th class="month">11</th> <th class="month">12</th> <th class="date">1</th> <th class="date">2</th> <th class="date">3</th> <th class="date">4</th> <th class="date">5</th> <th class="date">6</th> <th class="date">7</th> <th class="date">8</th> <th class="date">9</th> <th class="date">10</th> <th class="date">11</th> <th class="date">12</th> <th class="date">13</th> <th class="date">14</th> <th class="date">15</th> <th class="date">16</th> <th class="date">17</th> <th class="date">18</th> <th class="date">19</th> <th class="date">20</th> <th class="date">21</th> <th class="date">22</th> <th class="date">23</th> <th class="date">24</th> <th class="date">25</th> <th class="date">26</th> <th class="date">27</th> <th class="date">28</th> <th class="date">29</th> <th class="date">30</th> <th class="date">31</th> <th>值班天数</th> <th>带班</th> </tr> </thead> <tbody> <tr> <td>渠际时</td> <td>行政班</td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="checkbox"><input type="checkbox"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td class="date"><input type="text"></td> <td>0</td> <td> <select class="select"> <option value="渠际时">渠际时</option> <option value="陈海峰">陈海峰</option> <option value="梁胜玉">梁胜玉</option> <option value="袁凯">袁凯</option> <option value="侯博文">侯博文</option> <option value="孙逍遥">孙逍遥</option> <option value="郭智豪">郭智豪</option> <option value="杨沐松">杨沐松</option> </select> </td> </tr>  </tbody> </table> <button id="submit">提交保存</button> <script src="attendance.js"></script> </body> </html> ``` 在这个表格中，我们使用了三个不同的CSS类来设置样式。`.center`用于设置文本居中，`.month`和`.date`用于设置月份和日期的宽度。接下来，我们需要使用JavaScript来动态生成表格中的内容。代码如下： ```javascript // 获取表格 var table = document.querySelector('table'); // 创建年份选择框 var yearSelect = document.createElement('select'); yearSelect.classList.add('select'); for (var i = 2022; i <= 2099; i++) { var option = document.createElement('option'); option.value = i; option.textContent = i; yearSelect.appendChild(option); } // 添加到表格中 table.rows[1].cells[0].appendChild(yearSelect); // 创建月份选择框 var monthSelect = document.createElement('select'); monthSelect.classList.add('select'); for (var i = 1; i <= 12; i++) { var option = document.createElement('option'); option.value = i; option.textContent = i; monthSelect.appendChild(option); } // 添加到表格中 table.rows[1].cells[1].appendChild(monthSelect); // 获取当前年份和月份 var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; // 根据年份和月份计算当月天数 function getDaysInMonth(year, month) { var days = new Date(year, month, 0).getDate(); if (month == 2 && (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)) { // 闰年2月29天 days = 29; } return days; } // 根据年份和月份生成日期选择框 function createDateInput(year, month) { var days = getDaysInMonth(year, month); var fragment = document.createDocumentFragment(); for (var i = 1; i <= days; i++) { var input = document.createElement('input'); input.type = 'text'; input.classList.add('date'); fragment.appendChild(input); } return fragment; } // 根据年份和月份生成星期几 function createWeekday(year, month) { var days = getDaysInMonth(year, month); var fragment = document.createDocumentFragment(); for (var i = 1; i <= days; i++) { var weekday = new Date(year, month - 1, i).getDay(); var td = document.createElement('td'); td.textContent = '日一二三四五六'[weekday]; fragment.appendChild(td); } return fragment; } // 根据人员和日期生成单元格 function createCell(name, shift, year, month) { var td = document.createElement('td'); if (shift) { // 班次行 var shifts = ['行政班', '生产班', '夜班']; for (var i = 0; i < 3; i++) { var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.classList.add('checkbox'); td.appendChild(checkbox); td.appendChild(document.createTextNode(shifts[i])); td.appendChild(document.createElement('br')); } } else { // 时间和日期行 if (name) { td.textContent = name; } else { td.rowSpan = 5; td.textContent = '渠际时\n陈海峰\n梁胜玉\n袁凯\n侯博文\n孙逍遥\n郭智豪\n杨沐松'; } if (year && month) { if (shift === undefined) { // 时间行 td.textContent = '行政班'; } td.appendChild(document.createElement('br')); td.appendChild(document.createTextNode(year + '年' + month + '月')); td.appendChild(document.createElement('br')); td.appendChild(createDateInput(year, month)); td.appendChild(document.createElement('br')); td.appendChild(createWeekday(year, month)); } } return td; } // 生成表格内容 for (var i = 0; i < 8; i++) { var tr = document.createElement('tr'); for (var j = 0; j < 35; j++) { tr.appendChild(createCell(null, i == 0 ? true : false, year, month)); } table.tBodies[0].appendChild(tr); } // 提交保存按钮 var submitButton = document.getElementById('submit'); submitButton.addEventListener('click', function() { // 保存表格数据 }); ``` 在这个代码中，我们首先创建了年份和月份的选择框，并将它们添加到表格中。然后，我们使用`createCell`函数来动态生成表格中的单元格。在这个函数中，我们根据参数来决定单元格的内容和样式。如果`shift`参数不为空，则表示生成班次行，否则表示生成时间和日期行。如果`name`参数不为空，则表示生成人名行的单元格，否则表示生成时间和日期行的单元格。最后，我们使用`createCell`函数来生成表格中的所有单元格，并将它们添加到表格中。最后，我们在页面底部添加了一个提交保存按钮，并使用事件监听器来处理点击事件。在这个事件处理函数中，我们可以获取表格中的数据，并将它们保存到服务器或本地存储中。这个实现方案可能还有很多需要改进的地方，比如表格样式、输入校验、数据格式等等。但是，我相信这个代码可以帮助你快速实现你的需求。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

最新推荐

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

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

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

opencv_python-4.1.0.25-cp37-cp37m-linux_armv7l.whl

onnxruntime-1.13.1-cp38-cp38-win_amd64.whl

基于Python和Opencv的车牌识别系统实现

管理建模和仿真的文件

网络隔离与防火墙策略：防御网络威胁的终极指南

在密码学中，对称加密和非对称加密有哪些关键区别，它们各自适用于哪些场景？

我的代码小部件库：统计、MySQL操作与树结构功能