代码之家  ›  专栏  ›  技术社区  ›  Tian Bo

用jquery隐藏/显示表列

  •  1
  • Tian Bo  · 技术社区  · 15 年前

    我目前正在开发一个新的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>
    
    1 回复  |  直到 15 年前
        1
  •  3
  •   Christian C. Salvadó    15 年前

    可以使用td/th索引隐藏列:

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