隐藏表格行
[英]Hide a table row
问题描述
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语句时（当表行中没有内容时），该行应被隐藏。 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 个解决方案
解决方案1
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. 您正在尝试查找具有ID的元素，因此请在前面指定＃。
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. 此代码搜索ID为id的每个tr以Sample开头。 Then seach for each span inside this tr and check if one of all spans have content or not. 然后在该tr内的每个跨度中搜索，并检查所有跨度之一是否具有内容。
$( '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();
}
});
解决方案2
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/ 这是我认为您要完成的事情的小提琴： http : //jsfiddle.net/08fo4exe/
Here is the jquery code: 这是jQuery代码：
(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: 给您的tr一个类，而不是通过单独的ID来引用您的td：
<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: 默认情况下，使用一些CSS来隐藏tbody中的所有tr，因此您只显示带有值的行：
tbody tr {
display:none;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.