Javascript - 在 Javascript 中计算 HTML 表列 AVG 值不起作用答案

【问题标题】：Javascript - Calculate HTML Table Column AVG Value In Javascript isn't workingJavascript - 在 Javascript 中计算 HTML 表列 AVG 值不起作用
【发布时间】：2018-09-07 13:27:39
【问题描述】：

在 Laravel 中工作。我需要计算“成本”的平均值但这不起作用。这是我的代码：

<table class="table table-striped table-bordered" id="table">
                    <thead>
                      <tr>
                         <th scope="col">ID</th>
                         <th scope="col">Name</th>
                         <th scope="col">Description</th>
                         <th scope="col">Cost</th>

                      </tr>
                    </thead>
                    <tbody id="myTable">
                    @foreach($detailsa as $invoice)
                        @foreach($invoice->subaccountinvoice as $sub_accounts)
                      <tr>
                          <td scope="row">{{$sub_accounts->codeinvoice}}</td>
                          <td scope="row">{{$sub_accounts->userinvoiceperson->user_name}}</td>
                          <td scope="row"><span>{{$sub_accounts->description}}</span></td>
                          <td scope="row"><span>{{$sub_accounts->amount}}</span></td>
                        </tr>
                         @endforeach
                  @endforeach
                  </tbody>
              </table>
    <span id="val"></span>

{{$sub_accounts->amount}} 返回一个数字

在 JavaScript 中

  <script>
        var table = document.getElementById("myTable"), avgVal, sumVal = 0, 
                    rowCount = table.rows.length - 1;// minus the header

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

        document.getElementById("val").innerHTML = "Average Value = " + parseInt(sumVal / rowCount);
    </script>

最终结果是：NaN，有人可以帮忙吗？谢谢！

【问题讨论】：

标签： javascript laravel average

【解决方案1】：

您似乎可以将table.rows.length - 1 更改为table.rows.length，将i = 1 更改为i = 0，并添加.children[0]，因为您有一个span 标签。

var table = document.getElementById("myTable"),
  avgVal, sumVal = 0,
  rowCount = table.rows.length;

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

document.getElementById("val").innerHTML = "Average Value = " + parseInt(sumVal / rowCount);

<table class="table table-striped table-bordered" id="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Description</th>
      <th scope="col">Cost</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td scope="row">1</td>
      <td scope="row">2</td>
      <td scope="row">3</td>
      <td scope="row"><span>10</span></td>
    </tr>
    <tr>
      <td scope="row">1</td>
      <td scope="row">2</td>
      <td scope="row">3</td>
      <td scope="row"><span>30</span></td>
    </tr>
  </tbody>
</table>
<span id="val"></span>

【讨论】：