Cacher/afficher des colonnes de table avec jQuery

Question

Je travaille actuellement sur un nouveau modèle Magento, et je suis confronté à des problèmes avec jQuery.

Mon code actuel pour app/design/frontend/default/blanc/modèle/catalogue/produit/list.phtml est similaire à suit (la page est hébergé ici: 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> 

Je veux utilisez jQuery pour avoir un texte sur la page qui permet à l'utilisateur de cliquer et afficher/masquer les 5 dernières colonnes de la table.

J'ai la prise dans le fichier (voulu essayer cacher 1 première colonne), mais apparemment ça ne fonctionne pas:

<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

Vous pouvez masquer une colonne à l'aide du td/th indice:

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