堆棧內存溢出
  簡體   English   中英

隱藏表格行

[英]Hide a table row

 原文  2015-02-02 13:59:13  0   2    javascript/ jquery/ html/ html-table

問題描述

我正在嘗試讓某個表行隱藏，如果某個標簽中沒有內容。 

<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語句時（當表行中沒有內容時），該行應被隱藏。 如果有內容，則應顯示。 但是，如果其中包含內容，則永遠不會顯示該表行。

請注意：<％％>是我正在使用的程序的占位符。

對於為什么會發生這種情況的任何幫助都會很棒，

謝謝。

2 個解決方案

解決方案1
 2  2015-02-02 14:12:48

采用 

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

代替 

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

您正在嘗試查找具有ID的元素，因此請在前面指定＃。

還可以使用 

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

代替 

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

編輯/更新

此代碼搜索ID為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();
     }
});

解決方案2
 0  2015-02-02 14:31:59

我認為您可以大量清理此解決方案並簡化代碼。 這是我認為您要完成的事情的小提琴： 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;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 隱藏表格中的特定行？ 按下拉菜單隱藏表格 如果沒有行，則隱藏表格標題 使用JavaScript隱藏表格行 jQuery隱藏表格行 隱藏表格的第五行 在表格中隱藏一行並再次顯示？ 如何隱藏HTML表格行 如何在angularJS中隱藏表格中的行？ 隱藏表格第二行 jQuery
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM