时间戳

首页 > 解决方案 > 只显示一列

jquery - 只显示一列

问题描述

如何使用 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><br />
<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><br />
<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();
});
});

标签： jqueryhtml-table

解决方案

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

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

推荐阅读