Hiding rows in a table HTML - html

Question

I have a table in HTML that gets populated with data. However if some of the data is not filled in - which it isn't always, then the table will display, but with empty rows. I'm trying to get these rows that are empty to be hidden. I've tried a few things and nothing has seemed to work as of yet, does anybody have any ideas?
Here is my HTML code for the table:
<table style= width: 1300px;" border="1" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td colspan="1" rowspan="2" style="width: 75px; text-align: center;"><span style="font-size: 16px;">Sample Number</span></td>
<td colspan="1" rowspan="2" style="width: 50px; text-align: center;"><span style="font-size: 16px;">Sample Type</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Pump No</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Cowl No</span></td>
<td colspan="1" rowspan="2" style="width: 200px; text-align: center;"><span style="font-size: 16px;">Sample Location</span></td>
<td colspan="2" rowspan="1" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Sampling Times</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Duration (mins)</span></td>
<td colspan="2" rowspan="1" style="text-align: center;"><span style="font-size: 16px;">Flow
Rates (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Mean<br>
Flow Rate (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Sample Volume (litres)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Fibres Counted</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Graticule Fields</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Limit of Detection (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Calculated Result (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Recorded Result (f/ml)</span></td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"><%SampleNumber_1%></span></td>
<td><span style="font-size: 16px;"><%TypeofTest_1%></span></td>
<td><span style="font-size: 16px;"><%PumpNo_1%></span></td>
<td><span style="font-size: 16px;"><%CowlNo_1%></span></td>
<td><span style="font-size: 16px;"><%SampleLocation_1%></span></td>
<td><span style="font-size: 16px;"><%SampleStart_1%></span></td>
<td><span style="font-size: 16px;"><%SampleFinish_1%></span></td>
<td><span style="font-size: 16px;"><%SampleDuration_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateStart_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateFinish_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRatelminMean_1%></span></td>
<td><span style="font-size: 16px;"><%SampleVolumelitres_1%></span></td>
<td><span style="font-size: 16px;"><%FibresCount_1%></span></td>
<td><span style="font-size: 16px;"><%GraticuleFields_1%></span></td>
<td><span style="font-size: 16px;"><%Limit_1%></span></td>
<td><span style="font-size: 16px;"><%CalculatedResult_m1%></span></td>
<td><span style="font-size: 16px;"><%ReportedResult_1%></span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"><%SampleNumber_2%></span></td>
<td><span style="font-size: 16px;"><%TypeofTest_2%></span></td>
<td><span style="font-size: 16px;"><%PumpNo_2%></span></td>
<td><span style="font-size: 16px;"><%CowlNo_2%></span></td>
<td><span style="font-size: 16px;"><%SampleLocation_2%></span></td>
<td><span style="font-size: 16px;"><%SampleStart_2%></span></td>
<td><span style="font-size: 16px;"><%SampleFinish_2%></span></td>
<td><span style="font-size: 16px;"><%SampleDuration_2%></span></td>
<td><span style="font-size: 16px;"><%FlowRateStart_2%></span></td>
<td><span style="font-size: 16px;"><%FlowRateFinish_2%></span></td>
<td><span style="font-size: 16px;"><%FlowRatelminMean_2%></span></td>
<td><span style="font-size: 16px;"><%SampleVolumelitres_2%></span></td>
<td><span style="font-size: 16px;"><%FibresCount_2%></span></td>
<td><span style="font-size: 16px;"><%GraticuleFields_2%></span></td>
<td><span style="font-size: 16px;"><%Limit_2%></span></td>
<td><span style="font-size: 16px;"><%CalculatedResult_m2%></span></td>
<td><span style="font-size: 16px;"><%ReportedResult_2%></span></td>
</tr>
For example, imagine only the first row was filled in and the second therefore not need be displayed.
Edit
The table gets populated using a mobile application, which you insert data into. The HTML is then a template so that it can be printed. To get this information from the app, you must put in the <% ... %> tags, the stuff inside the tag is the ID of a text-box within the app, for example. If you load this into a web browser it will only display the tags, if this is loaded in the mobile app, it will display information in the table. However if these text-boxes or drop-downs (whatever they may be) haven't been filled in then the table will still load, but with no data in it. I therefore need the blank rows with no data in, to be hidden.
Here is a link to my table and how it displays
http://screenpresso.com/=5xMwd The first image is how it displays within a browser and will always show the tag. However the second image is within the app and will show the data that the text boxes have in them, as mentioned above. As you can see if the text-boxes are blank there is blank rows.
Thanks in advance.

Answer 1

Here is a working DEMO
CSS:
table, table td {border: 1px solid #f00; height: 20px;}
jQuery
$('#start').click(function() {
var rows = $('table').find('tr');
$.each(rows, function(idx, trobj) {
var hasvalue = false;
var spans = $(this).find('td span');
$.each(spans, function(spanidx, spanobj) {
//console.log($(obj).html() );
if ($(spanobj).html() != '') {
hasvalue = true;
}
});
if (!hasvalue) {
$(this).hide();
}
});
});
Test HTML
<table style= "width: 1300px; border-collapse: collapse;" border="1" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td colspan="1" rowspan="2" style="width: 75px; text-align: center;"><span style="font-size: 16px;">Sample Number</span></td>
<td colspan="1" rowspan="2" style="width: 50px; text-align: center;"><span style="font-size: 16px;">Sample Type</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Pump No</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Cowl No</span></td>
<td colspan="1" rowspan="2" style="width: 200px; text-align: center;"><span style="font-size: 16px;">Sample Location</span></td>
<td colspan="2" rowspan="1" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Sampling Times</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Duration (mins)</span></td>
<td colspan="2" rowspan="1" style="text-align: center;"><span style="font-size: 16px;">Flow
Rates (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Mean<br>
Flow Rate (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Sample Volume (litres)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Fibres Counted</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Graticule Fields</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Limit of Detection (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Calculated Result (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Recorded Result (f/ml)</span></td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"><%SampleNumber_1%></span></td>
<td><span style="font-size: 16px;"><%TypeofTest_1%></span></td>
<td><span style="font-size: 16px;"><%PumpNo_1%></span></td>
<td><span style="font-size: 16px;"><%CowlNo_1%></span></td>
<td><span style="font-size: 16px;"><%SampleLocation_1%></span></td>
<td><span style="font-size: 16px;"><%SampleStart_1%></span></td>
<td><span style="font-size: 16px;"><%SampleFinish_1%></span></td>
<td><span style="font-size: 16px;"><%SampleDuration_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateStart_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateFinish_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRatelminMean_1%></span></td>
<td><span style="font-size: 16px;"><%SampleVolumelitres_1%></span></td>
<td><span style="font-size: 16px;"><%FibresCount_1%></span></td>
<td><span style="font-size: 16px;"><%GraticuleFields_1%></span></td>
<td><span style="font-size: 16px;"><%Limit_1%></span></td>
<td><span style="font-size: 16px;"><%CalculatedResult_m1%></span></td>
<td><span style="font-size: 16px;"><%ReportedResult_1%></span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
</tr>
</table>
<button id="start">START</button>
EDIT:
Ok, so based on OP edit, this is another jsfiddle: http://jsfiddle.net/b7pexhh6/8/