0

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.

Improve this question
1
  • can you provide a jsfiddle please ! Commented Feb 2, 2015 at 14:05

2 Answers 2

Reset to default
2

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(); } });
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I actually very recently ran into a very, very tricky issue where a table was displaying incorrectly because its "show/hide" code somewhere had used "display: none/block", when a table actually needs to have "display: table" or "display: table-row". Hopefully JQuery's show/hide methods handle that appropriately.
$(this).find('#SampleNumber1').length === 0 is giving the same result
@Jack look at my solution. The problem is $(selector).length is giving you the length of the collection returned by the selector not the length of the element's contents. Your code is asking do I have an element with the id of SampleNumber1 not does the element with the id of SampleNumber1 have any contents.
@MichaelHumelsine How would I go about finding the length of the contents?
@Jack I posted an answer to your question and provided a fiddle demo...is this not what you are after?
|
0

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; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.