Javascript 求和表条件

Question

我需要对两列表中的值求和，如果 col2 不为空，则将每一行添加到总数中，否则添加 col1。然后将总数发布到一个div

下面是我试过的但它输出空白。

var table = document.getElementById("PLTable");
    var cost_est = document.getElementsByClassName("cost_estimate");
    var act_cost = document.getElementsByClassName("act_cost");
    var sum2 = 0;
    for (var i = 0, row; row = table.rows[i]; i++) {
       if (act_cost[i].innerText>0) {
         sum2 += act_cost[i].innerText;
       }
       else {
         sum2 += cost_est[i].innerText;
       }
    }
    document.getElementById("cost_projected_total").innerHTML = sum2

<!--HTML data looks like this:-->

    <table id="PLTable">
      <thead>
        <tr>
          <th>cost estimate</th>
          <th>cost actual</th>
        </tr>
      </thead>
        <tr>
          <td class = "cost_estimate">100</td>
          <td class = "act_cost"></td>
        </tr>
        <tr>
          <td class = "cost_estimate">100</td>
          <td class = "act_cost">50</td>
        </tr>
    </table>
    
    <div id="cost_projected_total">
    </div>

正确的输出应该是 sum2 = 150 & 结果应该在 div 中输出。

有什么想法吗？

Answer 1

您的代码中有一些要点需要解决。

我将尝试总结错误所在以及应该如何更改:

• table.rows 实际上也循环了头部，因此您的索引会越界。
• innerText 返回一个文本，因此您首先需要将该值转换为一个Number，否则它将连接字符串。

所以，基本上，我为使您的代码保持当前状态所做的工作是:

• 添加了一个tbody
• 将 table.rows 更改为 tbody 行数。
• 获取循环项的两个数值。

下面是包含上述更改和修复的工作代码，它可能已经缩短了，我只是想让代码尽可能靠近您，以便您可以了解哪里出了问题，而不必依赖最优解。

var table = document.getElementById("PLTable");
var tbody = table.getElementsByTagName('tbody')[0];
var cost_est = document.getElementsByClassName("cost_estimate");
var act_cost = document.getElementsByClassName("act_cost");
var sum2 = 0;

for (var i = 0; i < tbody.getElementsByTagName('tr').length; i++) {
   var row_act_cost = Number(act_cost[i].innerText);
   var row_cost_est = Number(cost_est[i].innerText);
   if (row_act_cost > 0) {
     sum2 += row_act_cost;
   }
   else {
     sum2 += row_cost_est;
   }

}
document.getElementById("cost_projected_total").innerHTML = sum2;

<table id="PLTable">
  <thead>
    <tr>
      <th>cost estimate</th>
      <th>cost actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class = "cost_estimate">100</td>
      <td class = "act_cost"></td>
    </tr>
    <tr>
      <td class = "cost_estimate">100</td>
      <td class = "act_cost">50</td>
    </tr>
   </tbody>
</table>

<div id="cost_projected_total">
</div>