通過js或jQuery顯示/隱藏表格數據

Question

我似乎有點問題，也許有人可以幫助我。

我想用這段代碼做的是隱藏錶行/列，如果沒有從數據庫中拉出的數據。我可以用下面的代碼有點做到這一點：

<div style="border: 1px solid #ccc;"> 

    <table class="tableizer-table"> 
    <tr> 
     <td class="first-row" colspan="2"># Of Items in Package: <?php echo $_product->getItemsInPackage(); ?></td> 
    </tr> 
    <tr> 
     <td class="second-row">Size Scale</td> 
     <td class="second-row">Quantity</td> 
    </tr> 
    <tr> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_size_1') ?></td> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_quantity_one') ?></td> 
    </tr> 
    <tr> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_size_2') ?></td> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_quantity_two') ?></td> 
    </tr> 
    <tr> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_size_3') ?></td> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_quantity_three') ?></td> 
    </tr> 
     <tr> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_size_4') ?></td> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_quantity_four') ?></td> 
    </tr> 
    <tr> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_size_5') ?></td> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_quantity_five') ?></td> 
    </tr> 
    <tr> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_size_6') ?></td> 
     <td class="cell" style="empty-cells:hide; border-collapse: separate;"><?php echo $_product->getAttributeText('bundle_quantity_six') ?></td> 
    </tr> 
    </table> 
</div> 

基本上，bundle_size_5 & bundle_size_6（及其他） - 可能是或可能不存在，我需要隱藏的行/列。但我也想用CSS（邊框示例）來設計它的風格，並注意到即使它們被隱藏，保留的空間仍然存在，並且邊框繞過它。

有沒有辦法通過js或jQuery來完全隱藏這些行/列，除非有數據？

Answer 1

嘗試，

$(document).ready(function() { 
$('.tableizer-table tr').each(function() { 
    var t = $(this).find('td'); 
    if (t.text() === '') { 
    t.css('borderLeft','0px'); //or border-left 
    t.hide(); 
    } 
    }); 
}); 

Demo

Manual財產borderLeft，而不是 '邊界'。