考勤表开发问题求助：Un/check All对齐及Add Row功能异常

安全阿岳

2026-8-3

考勤表开发问题求助

Un/check All文本与复选框无法在同一行对齐，始终出现在月份选择器和Add Row按钮之间，无法实现同行布局；
Add Row按钮复制行时，Days Missed列的数字0未居中，且新增行没有浅色背景样式。

已尝试调整Un/check All的位置，但问题仍未解决。具体代码如下：

JavaScript代码

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[1].cells.length;
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
}

$('table').on('click', 'input[type="button"]', function(e) {
  $(this).closest('tr').remove()
})

$("#checkAll").change(function() {
  $("input:checkbox").prop('checked', $(this).prop("checked"));
});

CSS代码

body {
  line-height: 1.9;
  margin: 2em;
  min-width: 1100px;
}

th {
  background-color: #001f3f;
  color: #fff;
  padding: 1em 1.3em;
}

td {
  border-top: 5px solid #eee;
  padding: 0.5em 1em;
}

input {
  cursor: pointer;
}

/* Column types */

th.missed-col {
  background-color: #f00;
}

th.Attend-col {
  background-color: #f00;
}
td.Attend-col {
  background-color: #ffecec;
  color: #f00;
  text-align: center;
}
.name-col {
  text-align: left;
  min-width: 11rem;
}
td.missed-col {
  background-color: #ffecec;
  color: #f00;
  text-align: center;
}
input::placeholder {
  font-weight: bold;
  opacity: .5;
  color: black;
}
.mistyrose {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background-image: linear-gradient( 216deg, rgba(77, 77, 77, 0.05) 0%, rgba(77, 77, 77, 0.05) 25%, rgba(42, 42, 42, 0.05) 25%, rgba(42, 42, 42, 0.05) 38%, rgba(223, 223, 223, 0.05) 38%, rgba(223, 223, 223, 0.05) 75%, rgba(36, 36, 36, 0.05) 75%, rgba(36, 36, 36, 0.05) 100%), linear-gradient( 44deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.05) 34%, rgba(212, 212, 212, 0.05) 34%, rgba(212, 212, 212, 0.05) 57%, rgba(25, 25, 25, 0.05) 57%, rgba(25, 25, 25, 0.05) 89%, rgba(135, 135, 135, 0.05) 89%, rgba(135, 135, 135, 0.05) 100%), linear-gradient( 241deg, rgba(55, 55, 55, 0.05) 0%, rgba(55, 55, 55, 0.05) 14%, rgba(209, 209, 209, 0.05) 14%, rgba(209, 209, 209, 0.05) 60%, rgba(245, 245, 245, 0.05) 60%, rgba(245, 245, 245, 0.05) 69%, rgba(164, 164, 164, 0.05) 69%, rgba(164, 164, 164, 0.05) 100%), linear-gradient( 249deg, rgba(248, 248, 248, 0.05) 0%, rgba(248, 248, 248, 0.05) 32%, rgba(148, 148, 148, 0.05) 32%, rgba(148, 148, 148, 0.05) 35%, rgba(202, 202, 202, 0.05) 35%, rgba(202, 202, 202, 0.05) 51%, rgba(181, 181, 181, 0.05) 51%, rgba(181, 181, 181, 0.05) 100%), linear-gradient(92deg, rgb(255, 228, 225), rgb(255, 228, 225));
  z-index: -6;
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mistyrose"></div>
<h1>Attendance</h1>
<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<div class="holder">
  <td>Un/check All</td>
  <div class="attendance">
    <input type="checkbox" id="checkAll" />
    <span></span>
  </div>

  <table id="dataTable" width="350px" border="1">
    <thead>
      <tr>
        <th class="name-col">Name</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
        <th>16</th>
        <th>17</th>
        <th>18</th>
        <th>19</th>
        <th>20</th>
        <th>21</th>
        <th>22</th>
        <th>23</th>
        <th>24</th>
        <th>25</th>
        <th>26</th>
        <th>27</th>
        <th>28</th>
        <th>29</th>
        <th>30</th>
        <th>31</th>
        <th class="missed-col">Days Missed</th>
        <th>Remove</th>
      </tr>
    </thead>

    <input type="button" value="Add Row" onclick="addRow('dataTable')">

    <tbody>
      <tr class="visitor">
        <td class="name-col"><input type="text" placeholder="Your name"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="attend-col"><input type="checkbox"></td>
        <td class="missed-col">0</td>
        <td><input type="button" value="(Delete)"></td>
      </tr>
    </tbody>
  </table>

尝试过的调整代码片段

<div class="holder">
<td>Un/check All</td>
<div class="attendance">
<input type="checkbox" id="checkAll"/>
<span></span>
</div>

<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<table id="dataTable" width="350px" border="1">

<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<table id="dataTable" width="350px" border="1">

<div class="holder">
<td>Un/check All</td>
<div class="attendance">
<input type="checkbox" id="checkAll"/>
<span></span>
</div>

解决方案

问题1：Un/check All与复选框同行对齐

修正无效HTML结构：<td>标签仅能用于表格内部，替换为<span>：

<div class="holder">
  <span>Un/check All</span>
  <div class="attendance">
    <input type="checkbox" id="checkAll" />
  </div>
</div>

添加Flex布局实现同行：在CSS中给.holder添加样式：

.holder {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1em 0;
}

调整元素位置：将.holder放在月份选择器之后、表格之前，保证布局逻辑合理。

问题2：新增行样式与内容对齐

给新增行添加背景类：修改addRow函数，插入行后添加visitor类：

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  // 添加此行，继承背景样式
  row.classList.add('visitor');
  var colCount = table.rows[1].cells.length;
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    // 确保Days Missed列的td带有missed-col类，实现居中
    if (i === colCount - 2) {
      newcell.classList.add('missed-col');
    }
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
}

修正Add Row按钮位置：按钮不能放在<table>内部，移到表格外：

<input type="button" value="Add Row" onclick="addRow('dataTable')">
<table id="dataTable" width="350px" border="1">
  <!-- 表格内容 -->
</table>

内容的提问来源于stack exchange，提问作者Jose renzo

考勤表开发问题求助：Un/check All对齐及Add Row功能异常

JavaScript代码 #

CSS代码 #

HTML代码 #

尝试过的调整代码片段 #

解决方案 #

问题1：Un/check All与复选框同行对齐 #

问题2：新增行样式与内容对齐 #

JavaScript代码

CSS代码

HTML代码

尝试过的调整代码片段

解决方案

问题1：Un/check All与复选框同行对齐

问题2：新增行样式与内容对齐