无法将HTML表格单元格中的输入数据保存到JavaScript变量中

Question

我尝试将来自用户的输入放入使用HTML创建的表的单元格中，并将该数据保存到JavaScript的变量中。

我试图从表的行单元格到JavaScript变量一个接一个地获取数据，但在峰会后警告数据时，我在数据的位置上未定义。

HTML代码

<table border = "2" cellpadding = "6" cellspacing = "6" bordercolor = "white" bgcolor = "red" class="center" id="mytable" >
<tr>
<th style="background: white;">EDUCATION</th>
<th style="background: white;">INSTITUTE</th>
<th style="background: white;">PERCENTAGE</th>
</tr>
<tr>
<td style="color: white;">10 th</td>
<td id="10inst"><input type="text"></td>
<td  id="10per"><input type="text"></td>
</tr>
<tr>
<td style="color: white;" >12 th</td>
<td  id="12inst"><input type="text"></td>
<td  id="12per"><input type="text"></td>
</tr>
<tr>
<td style="color: white;">Graduaction</td>
<td  id="gradinst"><input type="text"></td>
<td  id="gradper"><input type="text"></td>           
</tr>
<tr>
<td style="color: white;">Masters</td>
<td id="masterinst"><input type="text"></td>
<td id="masterper"><input type="text"></td>           
</tr>
</table><br><br>

JavaScript代码

var inst10 = document.getElementById("mytable").value;
var inst12 = document.getElementById("12inst").value;
var masterinst = document.getElementById("masterinst").value;
var per10 = document.getElementById("10per").value;
var per12 = document.getElementById("12per").value;
var masterper = document.getElementById("masterper").value;
var gradinst=document.getElementById("gradinst").value;
var gradper=document.getElementById("gradper").value;

Answer 1

你的代码可能有两个问题:

1. 确保只在之后运行JavaScript在输入元素中输入文本。

2. 在<td>元素里面有<input>元素。这意味着当你获取<td>的telementbyid时，你还没有引用"元素"。的.value是没有定义的。为了修正这个问题:

   不是

var inst12 = document.getElementById("12inst").value;

:

var inst12 = document.getElementById("12inst").childNodes[0].value;

完整工作示例:https://jsfiddle.net/1dpg5j3q/

Answer 2

必须添加"id"属性，而不是td元素或表元素

这样的;

<input id="12inst" type="text">