Hide a table row
Question
I'm trying to get a table row to hide if a certain tag has no content in it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body onload="myFunction()">
<script>
function myFunction() {
if($(this).find('SampleNumber1').length === 0 && $(this).find('TypeofTest1').length === 0 && $(this).find('PumpNumber1').length === 0 && $(this).find('CowlNumber1').length === 0 && $(this).find('SampleLocation1').length === 0 && $(this).find('SampleStart1').length === 0 && $(this).find('SampleFinish1').length === 0 && $(this).find('SampleDuration1').length === 0 && $(this).find('FlowRateStart1').length === 0 && $(this).find('FlowRateFinish1').length === 0 && $(this).find('FlowRateMinMean1').length === 0 && $(this).find('SampleVolumeLitres1').length === 0 && $(this).find('FibresCount1').length === 0 && $(this).find('GraticuleFields1').length === 0 && $(this).find('Limit1').length === 0 && $(this).find('CalculatedResult1').length === 0 && $(this).find('ReportedResult1').length === 0) {
document.getElementById('Sample1').style.display = 'none';
} else {
document.getElementById('Sample1').style.display = 'block';
};
}
</script>
<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 id="Sample1">
<td><span id="SampleNumber1" style="font-size: 16px;"><%SampleNumber_1%></span></td>
<td><span id="TypeofTest1" style="font-size: 16px;"><%TypeofTest_1%></span></td>
<td><span id="PumpNumber1" style="font-size: 16px;"><%PumpNo_1%></span></td>
<td><span id="CowlNumber1" style="font-size: 16px;"><%CowlNo_1%></span></td>
<td><span id="SampleLocation1" style="font-size: 16px;"><%SampleLocation_1%></span></td>
<td><span id="SampleStart1" style="font-size: 16px;"><%SampleStart_1%></span></td>
<td><span id="SampleFinish1" style="font-size: 16px;"><%SampleFinish_1%></span></td>
<td><span id="SampleDuration1" style="font-size: 16px;"><%SampleDuration_1%></span></td>
<td><span id="FlowRateStart1" style="font-size: 16px;"><%FlowRateStart_1%></span></td>
<td><span id="FlowRateFinish1" style="font-size: 16px;"><%FlowRateFinish_1%></span></td>
<td><span id="FlowRateMinMean1" style="font-size: 16px;"><%FlowRatelminMean_1%></span></td>
<td><span id="SampleVolumeLitres1" style="font-size: 16px;"><%SampleVolumelitres_1%></span></td>
<td><span id="FibresCount1" style="font-size: 16px;"><%FibresCount_1%></span></td>
<td><span id="GraticuleFields1" style="font-size: 16px;"><%GraticuleFields_1%></span></td>
<td><span id="Limit1" style="font-size: 16px;"><%Limit_1%></span></td>
<td><span id="CalculatedResult1" style="font-size: 16px;"><%CalculatedResult_m1%></span></td>
<td><span id="ReportedResult1" style="font-size: 16px;"><%ReportedResult_1%></span></td>
</tr>
</tbody>
So, when the if statement is met (when there is no content in the table row), the row should be hidden. If there is content, it should be shown. However the table row is never shown when there is content in it.
Please note: The <% %> are placeholders for a program I am using.
Any help into why this might be happening would be great,
Thanks.
2 answers
solution1
2 2015-02-02 14:12:48
use
$(this).find('#SampleNumber1').length
instead of
$(this).find('SampleNumber1').length
you are trying to find an element with ID so specify # before.
Aswell you can use
$('#Sample1').hide();
$('#Sample1').show();
instead of
document.getElementById('Sample1').style.display = 'none';
document.getElementById('Sample1').style.display = 'block';
EDIT/UPDATE
This code search for each tr with id starts with Sample. Then seach for each span inside this tr and check if one of all spans have content or not.
$( 'tr[id^="Sample"]' ).each(function() {
var empty = true;
$( this ).find("span").each(function() {
if ($( this ).is(':empty') === false) {
empty = false;
}
});
if (empty === false) {
$(this).show();
} else {
$(this).hide();
}
});
solution2
0 2015-02-02 14:31:59
I think you could clean up this solution a lot and simplify the code. Here is a fiddle of what I think you are trying to accomplish: http://jsfiddle.net/08fo4exe/
Here is the jquery code:
(function($){
var values = $('.value').children('td');
$.each(values, function(){
if($(this).text().length > 0){
$(this).parent('tr.value').show();
}
});
})(jQuery);
Give your tr's a class instead of referencing your td's all by a separate ids:
<table>
<thead>
<tr>
<th>Sample1</th>
<th>Sample2</th>
<th>Sample3</th>
<th>Sample4</th>
</tr>
</thead>
<tbody>
<tr class='value'>
<td>Value1</td>
<td>Value2</td>
<td></td>
<td></td>
</tr>
<tr class='value'>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class='value'>
<td></td>
<td>Value2</td>
<td></td>
<td>Value4</td>
</tr>
</tbody>
</table>
Use a little CSS to hide all the tr's in the tbody by default so you are only showing the rows with values:
tbody tr {
display:none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hide a specific row in table?
Hide table row by dropdown
Hide table header if there is no row
Hide Table Row with Javascript
jQuery hide table row
Hide fifth row of a table
Hide a row in a table and display it again?
How to Hide HTML table row
How to hide a row in a table in angularJS?
Hide second row of table jQuery
Related Tags