productTable

HTML

<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>
     ...

CSS

.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:...

JavaScript

var value = 'rackPlan0';
$('#' + 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);
});