从含输入框的HTML表格中获取行数据的技术求助

你遇到的核心问题有三个：

• 动态添加行时未创建真实输入框：addRowEquipment中误用HTML实体<和>，导致插入的是纯文本而非可交互的<input>元素，新行的输入框无法被DOM识别。
• 数据获取逻辑错误：getValue中用DOM元素和空字符串做判断，逻辑完全错误，应该检查输入框的value是否为空。
• 删除行无边界判断：removeRowEquipment直接固定删除第2行，当只剩初始行时点击会报错。

修正后的JavaScript代码 #

function addRowEquipment() {
  let table = document.getElementById("equipment-table");
  let row = table.insertRow(-1); // 自动插入到表格末尾，避免固定位置混乱
  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  let cell3 = row.insertCell(2);
  let cell4 = row.insertCell(3);
  // 直接在单元格中插入input，无需嵌套多余的tr/td
  cell1.innerHTML = '<input type="text" name="equipment" placeholder="New or Existing?">';
  cell2.innerHTML = '<input type="text" name="equipment" placeholder="Equipment installed...">';
  cell3.innerHTML = '<input type="text" name="equipment" placeholder="Serial Number...">';
  cell4.innerHTML = '<input type="text" name="equipment" placeholder="Value per item...">';
}

function removeRowEquipment() {
  let table = document.getElementById("equipment-table");
  // 保留表头+至少一行数据，防止删除空表格报错
  if (table.rows.length > 2) {
    table.deleteRow(table.rows.length - 1); // 删除最后一行，符合操作直觉
  }
}

function getValue() {
  const tableData = document.getElementsByName("equipment");
  const tableValues = [];
  // 每4个输入框对应一行，按行分组拼接字符串
  for (let i = 0; i < tableData.length; i += 4) {
    const rowString = [
      tableData[i].value.trim(),
      tableData[i+1].value.trim(),
      tableData[i+2].value.trim(),
      tableData[i+3].value.trim()
    ].join(',');
    // 跳过完全为空的行
    if (rowString.replace(/,/g, '') !== '') {
      tableValues.push(rowString);
    }
  }
  console.log(tableValues);
}

关键修改说明 #

1. 修复添加行逻辑：

   • 用insertRow(-1)替代固定位置插入，自动追加到表格末尾。
   • 移除HTML实体，直接写入<input>元素，确保新行输入框能被DOM正常捕获。
   • 删除多余的<tr><td>嵌套，因为row本身就是表格行，cell是单元格，直接插入输入框即可。

2. 完善删除行逻辑：

   • 添加行数判断，确保表格始终保留表头和至少一行数据，避免报错。
   • 改为删除最后一行，符合用户添加/删除的操作习惯。

3. 优化数据获取逻辑：

   • 按每4个输入框为一组（对应一行），将每行的4个值拼接成字符串后推入数组，满足你“每行数据存为一个字符串”的需求。
   • 用trim()去除输入值首尾空格，加入空行过滤，提升数据整洁度。

原CSS和HTML代码无需修改，可直接使用 #

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