per Space
HTML
<table class="table-style" id="rackPlan1">
<thead>
<tr class="nukeMe">
<th>Category Group</th>
<th>Category</th>
<th>Fineline</th>
<th>Supplier</th>
<th>CC</th>
<th>SC</th>
<th>Set Strategy</th>
<th>Store Ct</th>
<th>Landed Cost</th>
<th>FF%</th>
<th>Cost W/FF</th>
<th>Retail $</th>
<th>MU %</th>
<th>In Str Wk</th>
<th>Start Wk</th>
<th>End Wk</th>
<th>MD Wk</th>
<th>Fixture</th>
<th>Brand</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>Fixture Points</th>
</tr>
</thead>
<tbody>
<tr class="nukeMe" style="display: none;">
<td class="catGrp">SEASONAL</td>
<td class="category">HEAD AND HAND (D23)</td>
<td class="parent1">1712 AC Hats</td>
<td></td>
<td>0</td>
<td>1</td>
<td>10-30</td>
<td class="storeCt">673</td>
<td>$0.00</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>0.00%</td>
<td>201651</td>
<td>201701</td>
<td>201725</td>
<td>201726</td>
<td>4WAY</td>
<td></td>
<td class="protoA">1.00</td>
<td class="protoB">0.00</td>
<td class="protoC">1.00</td>
<td class="protoD">1.00</td>
<td class="protoE">1.00</td>
<td class="protoF">1.00</td>
<td class="protoG">1.00</td>
<td class="protoH">1.00</td>
<td class="protoI">1.00</td>
<td class="protoJ">1.00</td>
<td class="protoK">1.00</td>
<td class="protoL">1.00</td>
<td class="protoM">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;
/*overflow-x: hidden;
overflow-y: hidden;*/
}
.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...
JavaScript
$(function percentSpace() {
// This will hold the last two rows of rackPlan0
var rp0 = $('#rackPlan0 > tbody > tr.categorySub');
// This will hold only the `.totalColumn` cells of the last `rackPlan1` row
var rp1 = $('#rackPlan1 > tbody > tr:last-child > td.totalColumn')
// Iterate over the two rp0 rows
rp0.each(function(_, row) {
// Iterate over the TDs in the current row
$(row).find("td.catSub").text(function(i, txt) {
// Get the number from the corresponding rp1 cell
var c = parseFloat($(rp1[i]).text()) || 0;
// Get the number from the current rp0 cell
var d = parseFloat(txt) || 0;
// Do the math, and return to insert it as text
return ((d / c) * 100).toFixed(0) + "%"
})
});
})