使用jQuery隐藏/显示表格列

Question

我目前正在研究一个新的Magento模板，并且遇到了jQuery的问题。

我的应用程序/设计/前端/默认/空/模板/目录/产品当前的代码/ 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隐藏列/日指数：

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