How can I hide a table column under a specific heading?

user_14444645 0
Viewed 59

I need to hide the last "Where to Buy" column on the table in the middle of this page. There are hundreds of product pages with this column, which is always last but not always the 4th, 5th, etc. (e.g., some tables have more columns than others).

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

I've tried the jQuery below that I found on the web and it works to hide the header, but I can't figure out how to hide the TD stuff.

The table has a class of .table but I can't just hide the last child using CSS because other tables use the same class (thanks a lot web agency!).

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

if($(".table").hasClass('ps-widget')){
   $(".ps-widget").hide();
}
css html jquery
2 Answers

If you want to specifically hide columns under the heading "Where to Buy" (which is a rather fragile approach since it relies on text that may change), you can find its index and remove those table cells:

  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>

user_12648040

From what you show, if you wanted to run something that would work for just running in a console, and it was always the final column. you can try something like this:

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

Since you mention you only want to get the middle table, you can do a similar jQuery statement:

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

However, since the count of tables could change per-page that you are visiting, so this would most likely be better as a server-side change than as an obfuscation on the serverside.

user_64958890
Related