dept total

by khemikal

HTML

<table class="table-style" id="rackPlan3">
  <thead>
    <tr>
      <th> </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>
  </thead>
  <tbody>
    <tr class="cls">
      <td>Clearance Racks/Store</td>
      <td class="cls">10</td>
      <td class="cls">8</td>
      <td class="cls">8</td>
      <td class="cls">8</td>
      <td class="cls">4</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">3</td>
      <td class="cls">2</td>
      <td class="cls">2</td>
      <td class="cls">2</td>
      <td class="cls">1</td>
      <td class="total">75</td>
    </tr>
    <tr class="catGrp">
      <td class="catGrp">ACTIVEWEAR &amp; FLEECE</td>
      <td class="catGrp">4.25</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">3.00</td>
      <td class="catGrp">2.00</td>
      <td class="catGrp">2.00</td>
      <td class="catGrp">1.00</td>
      <td...

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css);
* {
  -webkit-print-color-adjust: exact;
  margin: 0;
  padding: 0;
}

*,
:before,
:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font: 12px/1 Montserrat, sans-serif;
  color: #333;
}

.wrapper {
  display: flex;
  min-height: 100%;
}

.sidebar {
  position: absolute;
  width: 12%;
}

.content {
  flex: 1;
  background: #eee;
  box-shadow: 0 0 5px #000;
  transform: translate3d(0, 0, 0);
  transition: transform .3s;
  overflow: hidden;
  padding: 30px;
}

#ContentHolder {
  padding-top: 1px;
  clear: both;
  width: 88%;
  overflow-x: auto;
  overflow-y: auto;
}

.content.isOpen {
  transform: translate3d(12%, 0, 0);
}

.button-xpand:before {
  content: '\f0c9';
  font: 42px fontawesome;
}

.button-left:before {
  content: '\f0a8';
  font: 30px fontawesome;
}

.button-right:before {
  content: '\f0a9';
  font: 30px fontawesome;
}

.title {
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 7px;
  color: #eee;
  border-bottom: 1px solid #222;
  background: #2a2a2a;
}

.title a {
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 7px;
  color: #eee;
  border-bottom: 1px solid #222;
  background: #2a2a2a;
}

.nav li a {
  position: relative;
  display: block;
  font-size: 12px;
  color: #eee;
  border-bottom: 1px solid #222;
  padding: 15px 15px 15px 50px;
}

.nav li a:before {
  font: 14px fontawesome;
  position: absolute;
  top: 14px;
  left: 20px;
}

.nav li:nth-child(1) a:before {
  content: '\f207';
}

.nav li:nth-child(2) a:before {
  content: '\f126';
}

.nav li a.active {
  box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
  background: #444;
}

h1 {
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 8px;
}

h2 {
  font-size: 18px;
  font-weight: 400;
 ...

JavaScript

var protoLength = $('#rackPlan3 > thead > tr > th').length - 1; //global for proto amount detection  
$(function () {
    var starter = 2;
    var sum = 0;
    for (i = 0; i < protoLength; i++) {
        $('#rackPlan3 > tbody > tr > td:nth-child(' + starter + ')').each(function () {
            if ($(this).hasClass('catGrp')) {
                sum += parseFloat($(this).text(), 10) || 0;
                console.log(sum);
            }
            else if ($(this).hasClass('cls')) {
                sum += parseFloat($(this).text(), 10) || 0;
            }
            else if ($(this).hasClass('total')) {
                $(this).text(sum.toFixed(2));
                sum = 0;                
            }
        });
        starter++;
    } 
})