Multiplying values of cells returning nothing

Question

I have a function that loops over rows and captures the values in certain cells. It successfully does that, and I am able to return those individual values even. However when I try and multiple them it returns nothing. Here is my JSFiddle

Here is my function:

$('#' + value + ' .totalRacks').each(function() {
  $.each(this.cells, function() {
    var index = $(this).index() + 1;
    var prevRow0 = $(this).closest('tr').prev().find('td:nth-child(' + index + ')');
    var prevRow1 = $(this).closest('tr').prev().prev().prev().find('td:nth-child(' + index + ')');
    if (!isNaN(parseInt(prevRow0.text()))) {
      var td1 = parseInt(prevRow0.text());
    }
    if (!isNaN(parseInt(prevRow1))) {
      var td2 = parseInt(prevRow1);
    }
    var product = parseInt((td1 * td2));
    $(this).html(product);
  });
});

Answer 1

You have a couple of logic issues. Firstly you can loop through the td cells using a single each() call and you missed the retrieval of the text() of the prevRow1. If you fix those issues the code works. You can also tidy the isNaN checks by defaulting the values to 0. Try this:

$('#' + value + ' .totalRacks td:not(:first, :last)').each(function() {
    var index = $(this).index() + 1;
    var prevRow0 = $(this).closest('tr').prev().find('td:nth-child(' + index + ')');
    var prevRow1 = $(this).closest('tr').prev().prev().prev().find('td:nth-child(' + index + ')');

    var td1 = parseInt(prevRow0.text(), 10) || 0;
    var td2 = parseInt(prevRow1.text(), 10) || 0;    
    var product = parseInt(td1 * td2);
    $(this).html(product);
});

Updated fiddle

Answer 2

$('.totalRacks').each(function() {
  $.each(this.cells, function() {
    var index = $(this).index() + 1;
    var prevRow0 = $(this).closest('tr').prev().find('td:nth-child(' + index + ')');
    var prevRow1 = $(this).closest('tr').prev().prev().prev().find('td:nth-child(' + index + ')');
    var td1 = parseInt(prevRow0.text());
    var td2 = parseInt(prevRow1.text());
    var product = parseInt((td1 * td2));
    $(this).html(product);
  });
});

.table-style {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  margin-top: 15px;
  /*height: 320px;*/
  /*margin: auto;*/
  /*max-width: 600px;*/
  /*padding: 5px;*/
  /*width: 100%;*/
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
th {
  color: #D5DDE5;
  background: #333;
  border-bottom: 4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size: 12px;
  font-weight: 100;
  padding: 7px;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}
th:first-child {
  border-top-left-radius: 3px;
}
th:last-child {
  border-top-right-radius: 3px;
  border-right: none;
}
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  color: #666B85;
  font-size: 5px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
  background: #444;
  color: #FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}
tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
  background-color: #333333;
}
tr:nth-child(odd) td {
  /*background:#EBEBEB;*/
}
tr:nth-child(odd):hover td {
  background: #444;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 3px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 3px;
}
/*grand total color*/

#sumLw > tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
#sumWtd > tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
#sumStd > tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
#catSumLw > tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
#catSumWtd> tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
#catSumStd > tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
#mvpWtd > tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
#mvpStd > tbody > tr:last-child > td {
  color: #D5DDE5;
  background: #333333 !important;
}
/*hide some mvp columns */

/*#mvpWtd > tbody > td:nth-child(6) {
    display: none;
}*/

td {
  background: #FFFFFF;
  padding: 5px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}
td:last-child {
  border-right: 0px;
}
th.text-left {
  text-align: left;
}
th.text-center {
  text-align: center;
}
th.text-right {
  text-align: right;
}
td.text-left {
  text-align: left;
}
td.text-center {
  text-align: center;
}
td.text-right {
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-style" id="rackPlan0">
  <tbody>
    <tr>
      <th>Store Trait</th>
      <th>PROTO A</th>
      <th>PROTO B</th>
      <th>PROTO C</th>
      <th>PROTO D</th>
      <th>PROTO E</th>
      <th>PROTO F</th>
      <th>PROTO G</th>
      <th>PROTO H</th>
      <th>PROTO I</th>
      <th>PROTO J</th>
      <th>PROTO K</th>
      <th>PROTO L</th>
      <th>PROTO M</th>
      <th>PROTO N</th>
      <th>PROTO O</th>
      <th>PROTO P</th>
      <th>PROTO Q</th>
      <th>PROTO R</th>
      <th>PROTO S</th>
      <th>Total</th>
    </tr>
    <tr class="storeCount">
      <td>Store Count</td>
      <td class="protoA">5</td>
      <td class="protoB">8</td>
      <td class="protoC">39</td>
      <td class="protoD">110</td>
      <td class="protoE">329</td>
      <td class="protoF">408</td>
      <td class="protoG">642</td>
      <td class="protoH">542</td>
      <td class="protoI">393</td>
      <td class="protoJ">309</td>
      <td class="protoK">291</td>
      <td class="protoL">171</td>
      <td class="protoM">302</td>
      <td class="protoN">120</td>
      <td class="protoO">166</td>
      <td class="protoP">67</td>
      <td class="protoQ">18</td>
      <td class="protoR">10</td>
      <td class="protoS">5</td>
      <td class="totalRow">3,935</td>
    </tr>
    <tr class="runningStore">
      <td class="totalText"></td>
      <td class="protoA"></td>
      <td class="protoB"></td>
      <td class="protoC"></td>
      <td class="protoD"></td>
      <td class="protoE"></td>
      <td class="protoF"></td>
      <td class="protoG"></td>
      <td class="protoH"></td>
      <td class="protoI"></td>
      <td class="protoJ"></td>
      <td class="protoK"></td>
      <td class="protoL"></td>
      <td class="protoM"></td>
      <td class="protoN"></td>
      <td class="protoO"></td>
      <td class="protoP"></td>
      <td class="protoQ"></td>
      <td class="protoR"></td>
      <td class="protoS"></td>
      <td class="totalRow"></td>
    </tr>
    <tr class="racksPerStore">
      <td>Racks/Store</td>
      <td class="protoA">279</td>
      <td class="protoB">270</td>
      <td class="protoC">246</td>
      <td class="protoD">257</td>
      <td class="protoE">236</td>
      <td class="protoF">215</td>
      <td class="protoG">204</td>
      <td class="protoH">189</td>
      <td class="protoI">225</td>
      <td class="protoJ">178</td>
      <td class="protoK">166</td>
      <td class="protoL">151</td>
      <td class="protoM">140</td>
      <td class="protoN">121</td>
      <td class="protoO">108</td>
      <td class="protoP">94</td>
      <td class="protoQ">84</td>
      <td class="protoR">67</td>
      <td class="protoS">62</td>
      <td class="totalRow">3292</td>
    </tr>
    <tr class="totalRacks">
      <td class="totalText">Total Racks</td>
      <td class="protoA"></td>
      <td class="protoB"></td>
      <td class="protoC"></td>
      <td class="protoD"></td>
      <td class="protoE"></td>
      <td class="protoF"></td>
      <td class="protoG"></td>
      <td class="protoH"></td>
      <td class="protoI"></td>
      <td class="protoJ"></td>
      <td class="protoK"></td>
      <td class="protoL"></td>
      <td class="protoM"></td>
      <td class="protoN"></td>
      <td class="protoO"></td>
      <td class="protoP"></td>
      <td class="protoQ"></td>
      <td class="protoR"></td>
      <td class="protoS"></td>
      <td class="totalRow"></td>
    </tr>
  </tbody>
</table>