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

Try，

$(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();
    }  
  });
 });

演示

属性borderLeft的手册，而不是"border"。