Question

如果某个标签中没有内容，我试图让表格行隐藏起来。

<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>

因此，当满足if语句时（表行中没有内容），该行应该被隐藏。如果有内容，则应显示。但是，当是内容时，表行永远不会显示。

请注意：＆lt; %%＆gt;是我正在使用的程序的占位符。

为什么会发生这种情况的任何帮助都会很棒，

感谢。

Answer 1

使用

$(this).find('#SampleNumber1').length

而不是

$(this).find('SampleNumber1').length

您正在尝试查找具有ID的元素，因此请指定＃before。

你也可以使用

$('#Sample1').hide();
$('#Sample1').show();

而不是

document.getElementById('Sample1').style.display = 'none';
document.getElementById('Sample1').style.display = 'block';

修改/更新

此代码搜索每个带有id的tr都以Sample开头。然后搜索此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(); } });

Answer 2

我认为你可以清理这个解决方案并简化代码。这是我认为你想要完成的事情的一小部分：http://jsfiddle.net/08fo4exe/

这是jquery代码：

(function($){
    var values = $('.value').children('td');
    $.each(values, function(){
        if($(this).text().length > 0){
             $(this).parent('tr.value').show();  
        }
    });
})(jQuery);

给你的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>

默认使用一点CSS隐藏tbody中的所有tr，因此您只显示带有值的行：

tbody tr {
    display:none;
}

隐藏表格行

2 个答案: