使用jQuery添加表格单元格的总和，并将总和输入到表格底部的行单元格中

Question

首先，我最近主要从事市场营销。我所知道的所有编程都是自学的，所以对我轻松：)。

我有一个使用Drupal视图动态创建的4个表。这些表带有jQuery ui选项卡。每个表格行的最后一个单元格包含一个数字。我想做的是将每个单元格的数量相加，并在表格底部创建另一行，以输出单元格总和。

一年多以前，我写了一个JS函数来实现这一点，它工作正常，但现在却不行。标记中的某些内容必须通过Drupal /模块更新进行了更改，现在它不起作用。当我编写这个小脚本时，我的编程工作超出了我的计划，而且陷入了困境，但是现在我迷失了方向，我有些迷茫了。附件是我要完成的任务的图片。

这是我的标记和脚本。我正在使用jQuery v3.2.1，控制台中没有错误。

感谢您的帮助。

<div class="blocktabs click default ui-tabs ui-corner-all ui-widget ui-widget-content" id="blocktabs-docent_time">
  <ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header" role="tablist">
    <li aria-controls="blocktabs-docent_time-1" aria-expanded="true" aria-labelledby="ui-id-5" aria-selected="true" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0">
      <a class="ui-tabs-anchor" href="#blocktabs-docent_time-1" id="ui-id-5" role="presentation" tabindex="-1">This Month</a>
    </li>
    <li aria-controls="blocktabs-docent_time-2" aria-expanded="false" aria-labelledby="ui-id-6" aria-selected="false" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1">
      <a class="ui-tabs-anchor" href="#blocktabs-docent_time-2" id="ui-id-6" role="presentation" tabindex="-1">Last Month</a>
    </li>
    <li aria-controls="blocktabs-docent_time-3" aria-expanded="false" aria-labelledby="ui-id-7" aria-selected="false" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1">
      <a class="ui-tabs-anchor" href="#blocktabs-docent_time-3" id="ui-id-7" role="presentation" tabindex="-1">2 Months Ago</a>
    </li>
    <li aria-controls="blocktabs-docent_time-4" aria-expanded="false" aria-labelledby="ui-id-8" aria-selected="false" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1">
      <a class="ui-tabs-anchor" href="#blocktabs-docent_time-4" id="ui-id-8" role="presentation" tabindex="-1">This Year</a>
    </li>
  </ul>
  <div aria-hidden="false" aria-labelledby="ui-id-5" class="ui-tabs-panel ui-corner-bottom ui-widget-content" id="blocktabs-docent_time-1" role="tabpanel">
    <div class="view view-docent-time view-id-docent_time view-display-id-block_1">
      <div class="view-content">
        <div class="table-responsive">
          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th class="views-field views-field-field-time-date" id="view-field-time-date-table-column" scope="col">Date</th>
                <th class="views-field views-field-type" id="view-type-table-column" scope="col">Type</th>
                <th class="views-field views-field-term-node-tid" id="view-term-node-tid-table-column" scope="col">Task</th>
                <th class="views-field views-field-field-v-hours" id="view-field-v-hours-table-column" scope="col">Hours</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column">2018-12-07</td>
                <td class="views-field views-field-type" headers="view-type-table-column">Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column">Whalers Cabin</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column">6.5</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div aria-hidden="true" aria-labelledby="ui-id-6" class="ui-tabs-panel ui-corner-bottom ui-widget-content" id="blocktabs-docent_time-2" role="tabpanel" style="display: none;">
    <div class="view view-docent-time view-id-docent_time view-display-id-block_2">
      <div class="view-content">
        <div class="table-responsive">
          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th class="views-field views-field-field-time-date" id="view-field-time-date-table-column--2" scope="col">Date</th>
                <th class="views-field views-field-type" id="view-type-table-column--2" scope="col">Type</th>
                <th class="views-field views-field-term-node-tid" id="view-term-node-tid-table-column--2" scope="col">Task</th>
                <th class="views-field views-field-field-v-hours" id="view-field-v-hours-table-column--2" scope="col">Hours</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column--2">2018-11-07</td>
                <td class="views-field views-field-type" headers="view-type-table-column--2">Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column--2">Whalers Cabin</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column--2">8.0</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div aria-hidden="true" aria-labelledby="ui-id-7" class="ui-tabs-panel ui-corner-bottom ui-widget-content" id="blocktabs-docent_time-3" role="tabpanel" style="display: none;">
    <div class="view view-docent-time view-id-docent_time view-display-id-block_3">
      <div class="view-content">
        <div class="table-responsive">
          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th class="views-field views-field-field-time-date" id="view-field-time-date-table-column--3" scope="col">Date</th>
                <th class="views-field views-field-type" id="view-type-table-column--3" scope="col">Type</th>
                <th class="views-field views-field-term-node-tid" id="view-term-node-tid-table-column--3" scope="col">Task</th>
                <th class="views-field views-field-field-v-hours" id="view-field-v-hours-table-column--3" scope="col">Hours</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column--3">2018-10-07</td>
                <td class="views-field views-field-type" headers="view-type-table-column--3">Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column--3">Scoping</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column--3">5.5</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div aria-hidden="true" aria-labelledby="ui-id-8" class="ui-tabs-panel ui-corner-bottom ui-widget-content" id="blocktabs-docent_time-4" role="tabpanel" style="display: none;">
    <div class="view view-docent-time view-id-docent_time view-display-id-block_4">
      <div class="view-content">
        <div class="table-responsive">
          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th class="views-field views-field-field-time-date" id="view-field-time-date-table-column--4" scope="col">Date</th>
                <th class="views-field views-field-type" id="view-type-table-column--4" scope="col">Type</th>
                <th class="views-field views-field-term-node-tid" id="view-term-node-tid-table-column--4" scope="col">Task</th>
                <th class="views-field views-field-field-v-hours" id="view-field-v-hours-table-column--4" scope="col">Hours</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column--4">2018-10-07</td>
                <td class="views-field views-field-type" headers="view-type-table-column--4">Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column--4">Scoping</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column--4">5.5</td>
              </tr>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column--4">2018-12-07</td>
                <td class="views-field views-field-type" headers="view-type-table-column--4">Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column--4">Whalers Cabin</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column--4">6.5</td>
              </tr>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column--4">2018-11-07</td>
                <td class="views-field views-field-type" headers="view-type-table-column--4">Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column--4">Whalers Cabin</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column--4">8.0</td>
              </tr>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column--4">2018-01-02</td>
                <td class="views-field views-field-type" headers="view-type-table-column--4">Non-Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column--4">Monthly Docent Meeting</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column--4">2.0</td>
              </tr>
              <tr>
                <td class="views-field views-field-field-time-date" headers="view-field-time-date-table-column--4">2018-02-07</td>
                <td class="views-field views-field-type" headers="view-type-table-column--4">Non-Public Time</td>
                <td class="views-field views-field-term-node-tid" headers="view-term-node-tid-table-column--4">Administration</td>
                <td class="views-field views-field-field-v-hours" headers="view-field-v-hours-table-column--4">6.5</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

(function($) {
  
  
  $( document ).ready(function() {
    
    function totalTime($vars) {
      var $timeRecord = $vars.find('table tbody tr td:last-child');
      var $lasttableRow = $vars.find('table tbody tr').last();
      var totalTime = 0;
      $timeRecord.each(function () {
        totalTime += parseFloat($(this).text());
      });
      $lasttableRow.after('<tr><td><strong>TOTAL</strong></td><td></td><td></td><td><strong>' + totalTime + '</strong></td></tr>')
    }
    
    if ($('#blocktabs-docent_time').length) {
      totalTime($('#blocktabs-docent_time-1'));
      totalTime($('#blocktabs-docent_time-2'));
      totalTime($('#blocktabs-docent_time-3'));
      totalTime($('#blocktabs-docent_time-4'));
    }
            
  });
})(jQuery);