使用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();