首页 文章

仅显示一列[暂停]

提问于
浏览
-4

如何使用jQuery默认只显示一列 . 使用下拉菜单选择,您可以选择其他选项 . 看这里:jquery hide columns in table based on dropdown select

它有效,但在初始启动时会显示所有列 .

https://jsfiddle.net/db1844/0dtpy6oz/4/

表:

<span class="dropdown-db-wrapper"><select id="sel"><option value="column-2">RFT 
3/2</option>
<option value="column-3">RFT 3/3</option>
<option value="column-4">RFT 3/4</option>
<option value="column-5">RFT 3/5</option>
<option value="column-6">RFT 3/6</option>
</select>
</span>

<table id="tablepress-105-no-2" class="tablepress tablepress-id-105 wctable">
<thead>
<tr class="row-1">
<th class="column-1"><strong>Typ</strong></th>
<th class="column-2 column two"><span style="font-size:10px">Tisch</span>
<strong>RFT 3/2</strong></th> <th class="column-3 column three"><span style="font-size:10px">Tisch</span><br /> <strong>RFT 3/3</strong></th> <th class="column-4 column four"><span style="font-size:10px">Tisch</span><br /> <strong>RFT 3/4</strong></th> <th class="column-5 column five"><span style="font-size:10px">Tisch</span><br /> <strong>RFT 3/5</strong></th> <th class="column-6 column six"><span style="font-size:10px">Tisch</span>
<strong>RFT 3/6</strong></th> </tr> </thead> <tbody class="row-hover"> <tr class="row-2"> <td class="column-1">Höhe des Tisches<sup>1</sup></td> <td class="column-2 column two">780</td> <td class="column-3 column three">780</td> <td class="column-4 column four">780</td> <td class="column-5 column five">780</td> <td class="column-6 column six">780</td> </tr> <tr class="row-3"> <td class="column-1">Breite des Tisches mit Wasserrinne<sup>1</sup></td> <td class="column-2 column two">1150</td> <td class="column-3 column three">1650</td> <td class="column-4 column four">2150</td> <td class="column-5 column five">2650</td> <td class="column-6 column six">3150</td> </tr> <tr class="row-4"> <td class="column-1">Tisch Aufspannfläche (BxT)<sup>1</sup></td> <td class="column-2 column two">1000 x 350</td> <td class="column-3 column three">1500 x 350</td> <td class="column-4 column four">2000 x 350</td> <td class="column-5 column five">2500 x 350</td> <td class="column-6 column six">3000 x 350</td> </tr> <tr class="row-5"> <td class="column-1">T-nuten (Anzahl x Breite x Abstand)<sup>1</sup></td> <td class="column-2 column two">2 x 12 x 224</td> <td class="column-3 column three">2 x 12 x 224</td> <td class="column-4 column four">2 x 12 x 224</td> <td class="column-5 column five">2 x 12 x 224</td> <td class="column-6 column six">2 x 12 x 224</td> </tr> <tr class="row-6"> <td class="column-1">Gewicht ohne Oberteil</td> <td class="column-2 column two">350 kg</td> <td class="column-3 column three">520 kg</td> <td class="column-4 column four">680 kg</td> <td class="column-5 column five">840 kg</td> <td class="column-6 column six">990 kg</td> </tr> <tr class="row-7"> <td class="column-1">Anzahl der Oberteile max.</td> <td class="column-2 column two">2</td> <td class="column-3 column three">3</td> <td class="column-4 column four">4</td> <td class="column-5 column five">5</td> <td class="column-6 column six">6</td> </tr> </tbody> </table>

使用Javascript:

<!-- Putting jQuery into no-conflict mode. -->
var $j = jQuery.noConflict();

$j(document).ready(function () {
$j('#sel').on('change', function () {
var val = $j(this).val(), 
target = '.' + val;

$j('.column').hide();
$j(target).show();
});
});

1 回答

  • 1

    在初始页面加载时,您应该隐藏所有列 . 然后根据选择框值,您应该允许类显示或隐藏 . 检查此代码

    $('.choice').hide();
     if($('#sel').val() == 'one'){
       $('.one').show()
     }else{
      $('.two').show()
     }
    

相关问题