html - 如何隐藏特定标题下的表格列？

Question

我需要在 this page 中间的表格中隐藏最后一个“购买地点”列.有数百个产品页面有此列，它总是最后但不总是第 4、5 等(例如，一些表格的列数比其他表格多)。

<table class="table">
  <thead>
    <tr>
      <th>Part #</th>
      <th>Description</th>
      <th>Dimensions in. (mm)</th>
      <th>Uniformly Distributed Load lbs. (kg)</th>
      <th>Containment Capacity gal. (L)</th>
      <th>Weight lbs. (kg)</th>
      <th>Where to Buy</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1000
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, without drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1000" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1001
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, with drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1001" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
  </tbody>
</table>

我尝试了下面在网上找到的 jQuery，它可以隐藏标题，但我不知道如何隐藏 TD 内容。

该表有一个 .table 类，但我不能只使用 CSS 隐藏最后一个子表，因为其他表使用相同的类(非常感谢网络代理!)。

    // Hide WTB column - MPT 1-7-2021
$('.table th:contains("Where to Buy")').css('display', 'none')

if($(".table").hasClass('ps-widget')){
   $(".ps-widget").hide();
}

Answer 1

如果您想专门隐藏“购买地点”标题下的列(这是一种相当脆弱的方法，因为它依赖于可能会更改的文本)，您可以找到它的索引并删除那些表格单元格:

  jQuery(function($) {
    $('.table').each(function() {
      // $this is the table element
      let colHeader = $(this).find('th:contains("Where to Buy")');
      let colIndex = colHeader.index();

      colHeader.hide();

      $(this).find('tr').each(function() { // $this is the table element
        $(this).find('td').eq(colIndex).hide(); // $this is the table row
      });
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th>Part #</th>
      <th>Description</th>
      <th>Dimensions in. (mm)</th>
      <th>Uniformly Distributed Load lbs. (kg)</th>
      <th>Containment Capacity gal. (L)</th>
      <th>Weight lbs. (kg)</th>
      <th>Where to Buy</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1000
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, without drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1000" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
    <tr>
      <td class="toggler"><span class="cellLabel">Part #</span> 1001
      </td>
      <td><span class="cellLabel">Description</span> 4-Drum Spill Pallet, with drain
      </td>
      <td><span class="cellLabel">Dimensions in. (mm)</span> 53 x 53 x 11¾ (1347 x 1347 x 299)
      </td>
      <td><span class="cellLabel">Uniformly Distributed Load lbs. (kg)</span> 6,000 (2722)
      </td>
      <td><span class="cellLabel">Containment Capacity gal. (L)</span> 66 (250)
      </td>
      <td><span class="cellLabel">Weight  lbs. (kg)</span> 90.0 (41.0)
      </td>
      <td><span class="cellLabel">Where to Buy</span>
        <div class="ps-widget ps-enabled" ps-sku="1001" tabindex="0" aria-disabled="false" role="button" aria-label="Find where to buy this product" style="display: block; visibility: visible;"><span class="ps-button-label">Buy Now</span></div>
      </td>
    </tr>
  </tbody>
</table>