I have 5 variables extracted from a json packet that I display in a table. I want to sum those five to make a sixth variable that I can then also use in the table.
The variables I want to sum are activity1distance to activity5distance, summed to activitytotaldistance
The page in question is
https://vk7krj.com/running.html
and the table is the "Last 5 activities on Strava"
Below is the relevant code from the page-
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data)
$("#start_date_local_1").html((data[0].start_date_local).slice(0, 10))
$("#activity1type").html(data[0].type)
$("#activity1name").html(data[0].name)
$("#activity1distance").html(((data[0].distance) / 1000).toFixed(3))
$("#elevation1").html(data[0].total_elevation_gain)
$("#moving_time_1").html(toTime(data[0].moving_time))
$("#start_date_local_2").html((data[1].start_date_local).slice(0, 10))
$("#activity2type").html(data[1].type)
$("#activity2name").html(data[1].name)
$("#activity2distance").html(((data[1].distance) / 1000).toFixed(3))
$("#elevation2").html(data[1].total_elevation_gain)
$("#moving_time_2").html(toTime(data[1].moving_time))
$("#start_date_local_3").html((data[2].start_date_local).slice(0, 10))
$("#activity3type").html(data[2].type)
$("#activity3name").html(data[2].name)
$("#activity3distance").html(((data[2].distance) / 1000).toFixed(3))
$("#elevation3").html(data[2].total_elevation_gain)
$("#moving_time_3").html(toTime(data[2].moving_time))
$("#start_date_local_4").html((data[3].start_date_local).slice(0, 10))
$("#activity4type").html(data[3].type)
$("#activity4name").html(data[3].name)
$("#activity4distance").html(((data[3].distance) / 1000).toFixed(3))
$("#elevation4").html(data[3].total_elevation_gain)
$("#moving_time_4").html(toTime(data[3].moving_time))
$("#start_date_local_5").html((data[4].start_date_local).slice(0, 10))
$("#activity5type").html(data[4].type)
$("#activity5name").html(data[4].name)
$("#activity5distance").html(((data[4].distance) / 1000).toFixed(3))
$("#elevation5").html(data[4].total_elevation_gain)
$("#moving_time_5").html(toTime(data[4].moving_time))
if (data[0].distance > 0) {
$("#time_km_1").html(toTime(((data[0].moving_time) / ((data[0].distance) / 1000))).slice(3))
} else {}
if (data[1].distance > 0) {
$("#time_km_2").html(toTime(((data[1].moving_time) / ((data[1].distance) / 1000))).slice(3))
} else {}
if (data[2].distance > 0) {
$("#time_km_3").html(toTime(((data[2].moving_time) / ((data[2].distance) / 1000))).slice(3))
} else {}
if (data[3].distance > 0) {
$("#time_km_4").html(toTime(((data[3].moving_time) / ((data[3].distance) / 1000))).slice(3))
} else {}
if (data[4].distance > 0) {
$("#time_km_5").html(toTime(((data[4].moving_time) / ((data[4].distance) / 1000))).slice(3))
} else {}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>
So there is a pattern, that I am sure you saw, that you can repeat, thus condensing your code:
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data);
/* ADDED A VARIABLE HERE CALLED AGGREGATE */
/* INITIALIZED IT TO 0 AND ADD ANOTHER NUMBER TO IT... */
let aggregate = 0;
for (let i = 0; i < 5; i++)
{
$("#start_date_local_" + (i + 1)).html((data[0].start_date_local).slice(0, 10))
$("#activity" + (i + 1) + "type").html(data[i].type)
$("#activity" + (i + 1) + "name").html(data[i].name)
$("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3))
$("#elevation" + (i + 1)).html(data[i].total_elevation_gain)
$("#moving_time_" + (i + 1)).html(toTime(data[i].moving_time))
if (data[i].distance > 0) {
$("#time_km_" + (i + 1)).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3))
} else {}
/* HERE! (FOLLOW UP FROM PREVIOUS COMMENT) */
aggregate += Number(data[i].distance);
console.log(aggregate);
// we can get an element with document.getElementById()
// then we can use .innerHTML on the element and set it to something
the_div_element_we_want_to_add_data_to = document.getElementById("activitytotaldistance");
the_div_element_we_want_to_add_data_to.innerHTML = aggregate / 1000;
//etc etc
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>
Unfortuneately, I can't get /running/stava_activities.json to test if I made the proper corrections, but the concept is there. I left an aggregate at the bottom of the for loop to show how you might sum those values.
In my Html Page I need to keep the link selected when i click on it:
The HTML Code:
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>
The Other option is to change the link with simple label, and need to keep the label selected when click on it:
The Html code will be:
<table class="main-dev">
<tr>
<td>
labelA
</td>
</tr>
<tr>
<td>
labelB
</td>
</td>
</tr>
<tr>
<td>
labelC
</td>
</tr>
<tr>
<td>
labelD
</td>
</tr>
</table>
you can do this easily with JQ . see snippet below
if you want to remove selected class when click again on the same link, change addClass to toggleClass
var link = $(".titleForm")
$(link).on("click",function() {
var otherLinks = $(this).parents("tr").siblings().find(".selected")
$(this).addClass("selected")
$(otherLinks).removeClass("selected")
})
.selected {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>
I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however?
Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row?
Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00" >
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
Thank you so much for your help!
You may add to your css the following rule:
#options tr {
display: inline-table;
}
If you want to achieve the same result with jQuery you can write:
$('#options tr').css('display', 'inline-table');
Instead, if you need to move the sub table content to the upper table you can:
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
The snippet (css solution):
#options tr {
display: inline-table;
}
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight" >
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
The snippet (jQuery solution):
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
please let me know how to remove class hide from nextall sublevel when click on mainlevel. It should not remove hide class from other sublevel which is next to mainlevel. please check the table structure below:
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
</tbody>
</table>
If interpret Question correctly ? , try using .closest() to select parent of clicked element , .nextUntil() , :has() to select tr elements until next mainlevel , .find() to select .hide elements , .toggle() to toggle display of hide elements
$(".mainlevel").click(function() {
$(this).closest("tr").nextUntil("tr:has(.mainlevel)").find(".hide").toggle()
})
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">a</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">b</a>
</td>
</tr>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">c</a>
</td>
</tr>
</tbody>
</table>
I have a page with three tables I'm sorting: two reports tables in a div id'ed as report-table(which DOESN'T sort) and one id'ed as workstation-table (which DOES sort). The initialisation of the sort is the same code so I'm not sure what's going on.
JS
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
}, 5000);
var clicks = true
$("#application-name-label").animate({
"color": "black"
}, 1000);
$("#refresh-5-sec").addClass("pressed-button")
$("#refresh-button").on("click", function(event) {
var buttonGroup = $(this).next();
if(clicks) {
$(buttonGroup).fadeOut(
function() {
$(this).parent().css('padding-right', '235px');
$(this).parent().animate({
paddingRight: "15"
}, 300);
clicks = false;
});
} else {
$(buttonGroup).fadeIn();
clicks = true;
};
});
$("#refresh-buttons").on("click", "button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-off" :
interval = 50000000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-5-sec" :
interval = 5000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-30-sec" :
interval = 30000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-60-sec" :
interval = 60000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
}
if (interval != 0)
{
clearInterval(intervalId);
intervalId = setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("report-table").tablesorter({sortList: [[0,1], [1,0]]});
});
}, interval);
}
});
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'>
<div class='row-fluid'>
<div class='span1' id='replication-server'>
<img alt="Cog logo" src="/assets/cog_logo.png" />
<img alt="Crs" src="/assets/crs.png" />
Replication Server
<div class='span1 pull-right' id='refresh-label'>
<button class='btn' id='refresh-button'>Refresh Rate</button>
<div class='btn-group' id='refresh-buttons'>
<button class='btn btn-default' id='refresh-off'>Off</button>
<button class='btn btn-default' id='refresh-5-sec'>5 sec</button>
<button class='btn btn-default' id='refresh-30-sec'>30 sec</button>
<button class='btn btn-default' id='refresh-60-sec'>60 sec</button>
</div>
</div>
</div>
</div>
</h1>
<h2>
<small id='application-name-label'>Status Dashboard</small>
</h2>
<div id='status-tables'>
<div class='col-md-4'>
<h3>Reports</h3>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-cidne' data-toggle='collapse'>CIDNE</a>
</div>
<div class='uncollapse in' id='collapse-cidne'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>
CIDNE
</td>
<td>
quia
</td>
<td>
1,825,301
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,187,231
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
dolore
</td>
<td>
4,051,833
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
assumenda
</td>
<td>
4,921,630
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
7,047,737
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
3,806,981
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
sit
</td>
<td>
1,580,987
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
7,477,697
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,313,774
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quidem
</td>
<td>
219,960
</td>
</tr>
</table>
</div>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-dcgs' data-toggle='collapse'>DCGS</a>
</div>
<div class='uncollapse in' id='collapse-dcgs'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
3,816,119
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
1,946,655
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
4,278,956
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
7,676,013
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
1,230,434
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
5,415,422
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
2,622,098
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
6,462,915
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
8,797,296
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
9,564,459
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
8,010,943
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
524,049
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-md-5'>
<h3 id='workstation-title'>Workstations</h3>
<div class='span-1'>
<div id='sort-instructions'>(click column name to sort)</div>
</div>
<table class='table table-striped table-hover table-bordered' id='workstation-table'>
<thead>
<tr>
<th id='table-header'>Name</th>
<th id='table-header'>Downloaded</th>
<th id='table-header'>Available</th>
<th id='table-header'>Last Connect</th>
</tr>
</thead>
<tbody>
<tr>
<td>
recusandae
</td>
<td>
27,035
</td>
<td>
2,634,369
</td>
<td>
2013-09-05 21:18:46
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
49,685
</td>
<td>
1,364,771
</td>
<td>
2013-08-17 18:05:39
</td>
</tr>
<tr>
<td>
in
</td>
<td>
5,970
</td>
<td>
985,174
</td>
<td>
2013-07-16 09:57:24
</td>
</tr>
<tr>
<td>
nihil
</td>
<td>
17,907
</td>
<td>
8,029,822
</td>
<td>
2013-09-08 09:07:35
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
42,146
</td>
<td>
9,447,817
</td>
<td>
2013-07-23 14:25:28
</td>
</tr>
<tr>
<td>
facere
</td>
<td>
53,008
</td>
<td>
4,056,927
</td>
<td>
2013-07-15 22:49:34
</td>
</tr>
<tr>
<td>
et
</td>
<td>
41,147
</td>
<td>
5,211,530
</td>
<td>
2013-07-18 03:52:58
</td>
</tr>
<tr>
<td>
autem
</td>
<td>
29,545
</td>
<td>
3,338,005
</td>
<td>
2013-09-11 06:55:50
</td>
</tr>
</tbody>
</table>
</div>
<div class='col-md-3'>
<h3>Source</h3>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th id='table-header'>Type</th>
<th id='table-header'>Name</th>
<th id='table-header'>Status</th>
<tr>
<td>
CIDNE
</td>
<td>
http://abbottwaters.net/keshaun_smitham
</td>
<td>
<div id='service-up'></div>
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
http://jones.biz/ashlynn_schaden
</td>
<td>
<div id='service-down'></div>
</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
In your report-table your tbody is empty. Move all your rows into the tbody and you should be good.