通过 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，而不是“边界”。