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

【问题标题】：Unable to save input data from HTML table cells into JavaScript variables无法将 HTML 表格单元格中的输入数据保存到 JavaScript 变量中
【发布时间】：2021-01-29 16:24:19
【问题描述】：

我试图将用户的输入放入使用 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;

【问题讨论】：

欢迎来到 SO ！我认为这是因为当您初始化变量时，输入为空。

标签： javascript html css web

【解决方案1】：

您的代码中可能存在 2 个问题：

确保仅在在输入元素中输入文本后运行 JavaScript。
<input> 元素内有 <td> 元素。这意味着当您 getElementById 的 <td> - 您还没有引用 '' 元素。 '' 的 .value 确实是未定义的。所以要解决这个问题：

而不是

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

做：

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

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

【讨论】：

不，它不适合我，如果可以的话，请将 html 和 JavaScript 的完整代码发给我
是的。我在这里创建了一个示例：jsfiddle.net/1dpg5j3q 只需在表格单元格中输入文本，然后单击按钮“invoke javascript”（这解决了我提到的第一个关于仅在输入文本后运行 JS 的问题），然后您将在控制台中看到输入. JavaScript 代码为我提到的第二个问题提供了解决方案。

【解决方案2】：

您必须在输入元素中添加“id”属性，而不是 td 元素或表格元素

像这样;

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

【讨论】：