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

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>

Answer 2

从您所展示的内容来看，如果您想运行一些仅适用于在控制台中运行的东西，并且它始终是最后一列。你可以试试这样的：

$('table td:nth-last-child(1), table th:nth-last-child(1)').hide();

由于你提到你只想获取中间表，你可以做一个类似的jQuery语句：

$('table:nth-of-type(2) td:nth-last-child(1), table:nth-of-type(2) th:nth-last-child(1)').hide();

但是，由于表的数量可能会在您访问的每个页面上发生变化，因此这很可能作为服务器端的更改比作为服务器端的混淆更好。