HTML 表中的 Javascript 列平均值返回 NaN

我正在尝试完成一些应该相对简单的事情:对 HTML 表中的列进行平均，并将结果显示在最底部的一行中。

这是我的代码:

function lead_Res() {
    sumVal=0;
    var table = document.getElementById("lead_table");

    for (var i=1; i < (table.rows.length)-1; i++)
    {
      sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
    }

      document.getElementById("lead_res_num").innerHTML = sumVal;
    }

这里是有问题的 HTML 代码:

    <tr style="background-color:#4f81bd;">
    <td colspan="3" align="left" style="color:white"<strong>Results</strong>
    </td>
    <td colspan="2" style="color:white" id="lead_res_num"><input 
     type="number"><strong></strong></td></tr>

这是表格代码:

  <div class="lead_table">
      <table id="lead_table"style="width:100%">
  <tr>
    <th width="3%" id="i_d">ID</th>
    <th width="35%" id="assessment">Assessment</th>
    <th width="17%" id="risk_scale">Risk Scale<br>(1=Low Risk; 5=High Risk)</br></th>
    <th width="5%" id="score">Score</th>
    <th width="35%" id="notes">Explanation/Notes/Proposed Action</th>
  </tr>

  <tr>
    <td align="center">L1</td>
    <td>Question 1</td>
    <td Scale 1</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L2</td>
    <td>Question 2</td>
    <td align="center">Scale 2</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L3</td>
    <td>Question 3</td>
    <td align="center">Scale 3</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L4</td>
    <td>Question 4</td>
    <td align="center">Scale 4</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <<td align="center">L5</td>
    <td>Question 5</td>
    <td align="center">Scale 5</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L6</td>
    <td>Question 6</td>
    <td align="center">Scale 6</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L7</td>
    <td>Question 7</td>
    <td align="center">Scale 7</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L8</td>
    <td>Question 8</td>
    <td align="center">Scale 8</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L9</td>
    <td>Question 9</td>
    <td align="center">Scale 9</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L10</td>
    <td>Question 10</td>
    <td align="center">Scale 10</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L11</td>
    <td>Question 12</td>
    <td align="center">Scale 12</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L12</td>
    <td>Question 12</td>
    <td align="center">Scale 12</td>
    <td id="ans"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L13</td>
    <td>Question 13</td>
    <td align="center">Scale 13</td>
    <td id="ans13"><input type="number" min="1" max="5" style="text-align: center;"></td>
    <td><input type="text"></td>
  </tr>

  <tr style="background-color:#4f81bd;">
    <td colspan="3" align="left" style="color:white"><strong>Results</strong></td>
    <td colspan="2" style="color:white" id="lead_res_num"><strong></strong></td>
  </tr>

  </table>
    </div>

我已经测试了文本插入，效果很好，所以我确实将信息显示在我想要的位置。

不幸的是，当我尝试求和时，该框始终显示“NaN”。我尝试过仅指向一个带有数字的特定单元格，但仍然得到“NaN”。

最佳答案

您的问题是您的代码获取 .innerHTML各个单元格的名称，它是以下字符串:

<input type="number" min="1" max="5">

然后尝试有效地做到这一点:

parseInt('<input type="number" min="1" max="5">');

返回NaN .

您需要提取表单字段本身的值。

这可以通过比循环行更简单的方式来完成。您需要做的就是将所有表单字段收集到一个数组中，然后您可以使用 Array.reduce() 方法获取数组中字段值的总和。

您还需要修复一些 HTML 语法。您缺少一些>这里和那里的字符有 <<在一种情况下。

我已经设置了一个答案，每次使用 input 实时修改字段中的任何值时都会获取总和。事件。如果您想等到用户完成对字段的编辑(离开字段后)，请更改 input至change 。我还删除了 number 的所有重复样式。输入并创建了一个简单的 CSS 样式，该样式对所有输入应用相同的效果，而不会使 HTML 困惑。

// Get a reference to the output element:
var output = document.getElementById("lead_res_num");

// Gather up all the <input type="number"> elements in the table into an array
var scores = Array.prototype.slice.call(document.querySelectorAll("input[type=number]"));

// Loop through the field references in the array
scores.forEach(function(score){
  // Set up an input event handler for each <input type=number> field
  score.addEventListener("input", function(){
    // Reduce the values from all the inputs to the sum of all of them:
    var sum = scores.reduce(function(sum, item){
      return sum + +item.value;  // The + in front of item.value implicitly converts the value to a number
    }, 0);
    
    // Output the answer
    output.textContent = sum;
  });
});

/* No need to repeat styling information when you can apply it to many elements at once: */
input[type="number"] { text-align:center; }

<table id="lead_table"style="width:100%">
  <tr>
    <th width="3%" id="i_d">ID</th>
    <th width="35%" id="assessment">Assessment</th>
    <th width="17%" id="risk_scale">Risk Scale<br>(1=Low Risk; 5=High Risk)</th>
    <th width="5%" id="score">Score</th>
    <th width="35%" id="notes">Explanation/Notes/Proposed Action</th>
  </tr>

  <tr>
    <td align="center">L1</td>
    <td>Question 1</td>
    <td align="center">Scale 1</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L2</td>
    <td>Question 2</td>
    <td align="center">Scale 2</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L3</td>
    <td>Question 3</td>
    <td align="center">Scale 3</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L4</td>
    <td>Question 4</td>
    <td align="center">Scale 4</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L5</td>
    <td>Question 5</td>
    <td align="center">Scale 5</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L6</td>
    <td>Question 6</td>
    <td align="center">Scale 6</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L7</td>
    <td>Question 7</td>
    <td align="center">Scale 7</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L8</td>
    <td>Question 8</td>
    <td align="center">Scale 8</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L9</td>
    <td>Question 9</td>
    <td align="center">Scale 9</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L10</td>
    <td>Question 10</td>
    <td align="center">Scale 10</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L11</td>
    <td>Question 12</td>
    <td align="center">Scale 12</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L12</td>
    <td>Question 12</td>
    <td align="center">Scale 12</td>
    <td id="ans"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr>
    <td align="center">L13</td>
    <td>Question 13</td>
    <td align="center">Scale 13</td>
    <td id="ans13"><input type="number" min="1" max="5"></td>
    <td><input type="text"></td>
  </tr>

  <tr style="background-color:#4f81bd;">
    <td colspan="3" align="left" style="color:white"><strong>Results</strong></td>
    <td colspan="2" style="color:white"><strong id="lead_res_num"></strong></td>
  </tr>
</table>

关于HTML 表中的 Javascript 列平均值返回 NaN，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47822903/

HTML 表中的 Javascript 列平均值返回 NaN

上一篇：javascript - Uncaught ReferenceError ， "..."未定义

下一篇：javascript - 获取嵌套在另一个 iframe chrome 扩展中的 iframe