calcSum

by khemikal

HTML

<table class="table-style">
<tr class="overUnder">
  <td>Over/Under</td>
  <td class="protoA">-53</td>
  <td class="protoB">-49</td>
  <td class="protoC">-46</td>
  <td class="protoD">-42</td>
  <td class="protoE">-39</td>
  <td class="protoF">-35</td>
  <td class="protoG">-32</td>
  <td class="protoH">-29</td>
  <td class="protoI">-27</td>
  <td class="protoJ">-25</td>
  <td class="protoK">-22</td>
  <td class="protoL">-18</td>
  <td class="protoM">-16</td>
  <td class="totalRow"></td>
</tr>
</table>

CSS

.table-style {
  background: #FFF;
  border-radius: 3px;
  border-style: solid;
  border-collapse: collapse;
  margin-top: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
tr {
    border-top: 1px solid #C1C3D1;
    border-bottom: 1px solid #C1C3D1;
    color: #666B85;
    font-size: 15px;
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
td {
    background: #FFF;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 18px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    border-right: 1px solid #C1C3D1;
    padding: 4px;
}
td:hover {
    background: #55BB55;
    color: #FFF;
    border-top: 1px solid #22262e;
    border-bottom: 1px solid #22262e;
}

JavaScript

function calcSum(a, b) {
  var sum = 0;
  // iterate through each td based on class and add the values
  $(a).each(function() {
    var theVal = $(this).text();
    // add only if the value is number
    if (!isNaN(theVal) && theVal.length != 0) {
      sum += parseFloat(theVal);
    }
  });
  $(b).text(sum);
};
calcSum('.overUnder > td', '.overUnder > .totalRow');