Скрыть / показать столбцы таблицы с помощью jQuery

Question

В настоящее время я работаю над новым шаблоном Magento, и у меня возникают проблемы с jQuery.

Мой текущий код для app / design / frontend / default / blank / template / catalog / product / list.phtml выглядит следующим образом (страница размещена здесь: http://nordschleife.metaforix.net/118/118/index.php/panasonic.html)

<table border="1">
  <tr>
    <th width="178">Image</th>
    <th width="84">Order Code</th>
    <th width="84">Description</th>
    <th width="69">Cell Origin</th>
    <th width="98">Capacity (mAh)</th>
    <th width="110"><p>Price</p>
      <p><?php echo $this->getChildHtml('currency2'); ?></p></th>
    <th width="39">Buy</th>
    <th width="131">Cell(s)</th>
    <th width="52">Voltage</th>
    <th width="49">Rating (Wh)</th>
    <th width="71">Part Number</th>
    <th id="chem" width="69">Chemistry</th>
    <th width="82"><p>Dimensions</p>
      <p>(LxWxH)</p></th>
    <th width="52">Weight (g)</th>
    <th width="37">Color</th>
  </tr>
   <?php $_iterator = 0; ?>
    <ol class="products-list" id="products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <tr> 
        <td>
          <?php // Product Image ?>        
    </td>
         <td>
        <?php echo nl2br($_product->getSku()) ?>
         </td>
         <td>
            <?php // Product description ?>           
         </td>
         <td>
            <?php echo $_product->getAttributeText('country') ?>
         </td>
         <td>
            <?php echo $_product->getcapacity() ?>
         </td>
         <td>
            <?php echo $this->getPriceHtml($_product, true) ?>
         </td>
         <td>
            <?php //add to cart ?>
         </td>
         <td>
            <?php echo $_product->getcells() ?>
         </td>
         <td>
            <?php echo $_product->getvoltage() ?>
         </td>
         <td>
            <?php echo $_product->getrating() ?>
         </td>
         <td>
            <?php echo $_product->getmfgpartno(); ?>
         </td>
         <td>
            <?php //chemistry ?>
         </td>
         <td>
            <?php echo nl2br ($_product->getdimension()) ?>
         </td>
         <td>
            <?php echo (int)$_product->getweight() ?>
         </td>
         <td>
            <?php echo $_product->getAttributeText('color') ?>
         </td>
         </tr>       
        </div>
<?php endforeach; ?>
</table>

Я хочу использовать jQuery, чтобы на странице был текст, позволяющий пользователю щелкнуть и показать / скрыть последние 5 столбцов таблицы.

Я поместил это в файл (хотел сначала спрятать 1 столбец), но, видимо, это не работает:

<script type="text/javascript">
    function show() {
        jQuery(".chem").show();
    }
    function hide() {
         jQuery(".chem").hide();
     }
 </script>
<p><div>
jQuery
<span onclick="show() ">(More)</span>
<span onclick="hide() ">(Hide)</span> </div></p>

Answer 1

Вы можете скрыть столбец, используя индекс td / th:

$('#tableId td:nth-child(3), #tableId th:nth-child(3)').hide();