JavaScript考勤项目：新增表格无法关联用户输入数据

问题核心 #

你的代码中提交逻辑仅绑定初始表格行的固定ID元素（#name、#attendence、#date），新增表格行后没有跟踪当前需要更新的目标行，导致后续提交始终修改第一行数据。同时还存在表单提交刷新页面、日期固定为页面加载时间、复选框未互斥等问题，下面是完整修复代码及说明：

修复后完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Attendance System</title>
</head>

<body>
  <!-- header -->
  <div id="header">
    <p>Attendance Software</p>
  </div>
  <!-- Container -->
  <div id="container">
    <form id="attendance-form">
      <input type="text" id="name-input" placeholder="Enter name">
      <br> 
      Present <input type="radio" name="attendance-status" value="Present" class="status-radio">
      <br> 
      Absent <input type="radio" name="attendance-status" value="Absent" class="status-radio">
    </form>
    <button type="button" id="submit-btn">Submit</button>
    <button type="button" id="new-btn" onclick="createNewRow()">Create new</button>
  </div>
  <!-- Resulting Tables -->
  <div id="result">
    <table id="attendance-table">
      <tr>
        <th>NAME</th>
        <th>ATTENDANCE</th>
        <th>DATE</th>
      </tr>
      <!-- 初始行将通过JS动态创建 -->
    </table>
  </div>
  <div id="footer">
    <footer>&copy; Samip Regmi</footer>
  </div>
</body>

<script src="index.js"></script>

</html>

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#header {
  font-family: sans-serif;
  padding: 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: large;
  background-color: #bdeab2;
}

#container {
  font-family: sans-serif;
  margin-top: 50px;
  text-align: center;
}

input {
  margin-top: 10px;
  padding: 4px;
}

button {
  margin-top: 10px;
  margin-left: 5px;
}

#submit-btn,
#new-btn {
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid white;
  background-color: #bdeab2;
  color: black;
  cursor: pointer;
}

table {
  margin: 50px auto 0;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #bdeab2;
}

#new-btn {
  display: none;
}

#footer {
  text-transform: uppercase;
  font-size: large;
  font-family: sans-serif;
  background-color: #bdeab2;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
}

JavaScript代码 #

const submitBtn = document.querySelector('#submit-btn');
const newBtn = document.querySelector('#new-btn');
const nameInput = document.querySelector('#name-input');
const statusRadios = document.querySelectorAll('.status-radio');
const attendanceTable = document.querySelector('#attendance-table');
let currentRow = null;

// 初始化第一行
createNewRow();

// 新增表格行函数
function createNewRow() {
  const row = attendanceTable.insertRow(-1); // 插入到表格末尾
  const cell1 = row.insertCell(0);
  const cell2 = row.insertCell(1);
  const cell3 = row.insertCell(2);
  
  cell1.textContent = "No data";
  cell2.textContent = "No data";
  cell3.textContent = "No data";
  
  // 设置当前行
  currentRow = row;
  // 显示Create new按钮
  newBtn.style.display = 'inline';
  // 清空输入框和单选框
  clearForm();
}

// 提交按钮点击事件
submitBtn.addEventListener('click', () => {
  const name = nameInput.value.trim();
  const selectedStatus = Array.from(statusRadios).find(radio => radio.checked)?.value;

  // 验证输入
  if (!name || !selectedStatus) {
    alert("请输入姓名并选择出勤状态");
    return;
  }

  // 更新当前行数据
  currentRow.cells[0].textContent = name;
  currentRow.cells[1].textContent = selectedStatus;
  currentRow.cells[2].textContent = new Date().toLocaleString("en-IN");
  
  // 清空表单
  clearForm();
});

// 清空表单辅助函数
function clearForm() {
  nameInput.value = '';
  statusRadios.forEach(radio => radio.checked = false);
}

关键修改说明 #

1. 表单控件优化：将复选框改为单选框（通过相同name属性实现互斥），避免同时选择Present和Absent；修改按钮type为button，防止表单提交导致页面刷新。
2. 动态行跟踪：新增currentRow变量跟踪当前需要编辑的表格行，提交时直接更新该行的单元格内容，不再依赖固定ID。
3. 初始化逻辑：页面加载时自动创建第一行数据，统一行创建逻辑。
4. 日期逻辑修复：每次提交时生成新的日期，不再使用页面加载时的固定时间。
5. 用户体验优化：提交后清空表单，新增行时自动切换编辑目标，添加输入验证提示。

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