无法将HTML表格输入数据存入JavaScript变量，提交后取值为undefined

• 取值对象错配：你给id绑定的元素都是<td>表格单元格，这类元素本身没有value属性，用户的实际输入内容是存在单元格内嵌的<input>输入框里的，直接对td调用.value自然返回undefined。
• 首行逻辑完全错配：你本来要取10年级的院校数据，却选中了id为mytable的整个表格元素，表格本身不存在value属性，这行取到的值必然是undefined。
• 执行时机不对：原有JS是在页面刚加载的时候就立刻执行取值逻辑，这时候用户还没往输入框填内容、也没有触发提交动作，就算取值逻辑改对了，拿到的也只是空字符串。

步骤1：补充提交触发入口 #

在原有表格代码后添加提交按钮，作为数据获取的触发节点：

<br><br>
<button id="submitBtn">保存并获取表格数据</button>

步骤2：修正取值逻辑 #

不要在页面加载阶段直接取值，把取值动作绑定到提交按钮的点击事件上，每次用户点击提交时再读取对应输入框的内容，完整修正后的JS代码如下：

// 给提交按钮绑定点击事件，等用户完成输入、点击提交后再执行取值
document.getElementById('submitBtn').addEventListener('click', function() {
  // 先通过id定位到对应的td单元格，再查找内部的input元素读取输入值
  var inst10 = document.getElementById("10inst").querySelector("input").value;
  var inst12 = document.getElementById("12inst").querySelector("input").value;
  var gradinst = document.getElementById("gradinst").querySelector("input").value;
  var masterinst = document.getElementById("masterinst").querySelector("input").value;
  var per10 = document.getElementById("10per").querySelector("input").value;
  var per12 = document.getElementById("12per").querySelector("input").value;
  var gradper = document.getElementById("gradper").querySelector("input").value;
  var masterper = document.getElementById("masterper").querySelector("input").value;

  // 弹窗验证取值是否正常
  alert(
    `10年级就读院校：${inst10}，得分占比：${per10}%\n
    12年级就读院校：${inst12}，得分占比：${per12}%\n
    本科就读院校：${gradinst}，得分占比：${gradper}%\n
    硕士就读院校：${masterinst}，得分占比：${masterper}%`
  )
})

可选优化 #

如果觉得每次都要嵌套查找input比较繁琐，可以直接把原来加在td上的id移到内部的input标签上，后续取值可以简化为直接读取input的value，不需要额外查询：

<!-- 示例：调整原有td结构，把id直接绑定在input上 -->
<tr>
  <td style="color: white;">10 th</td>
  <td><input type="text" id="10inst"></td>
  <td><input type="text" id="10per"></td>
</tr>

对应JS取值可以简化为：

var inst10 = document.getElementById("10inst").value

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