通过js或jQuery显示/隐藏表格数据

我想用这段代码做的是隐藏表行/列，如果没有从数据库中拉出的数据。我可以用下面的代码有点做到这一点：

<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来完全隐藏这些行/列，除非有数据？

来源

2013-02-20 Gaile J

尝试，

$(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，而不是 '边界'。

来源

2013-02-20 18:37:26

下面是一个代码少的方法...小心地尝试它，可能无法适用于所有情况：http://jsfiddle.net/Ccwpm/ – gustavohenke 2013-02-20 18:48:45

感谢您的代码，但它似乎不适合我。这是当我将它应用到我的代码（图像）时的功能：http://imgur.com/VCOGOHI - 灰色边框仍然围绕着单元格隐藏的空白区域:( - 再次感谢您的帮助。 – 2013-02-20 19:02:56

通过js或jQuery显示/隐藏表格数据

回答

相关问题