默认情况下,使用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();
});
});
答案 0 :(得分:1)
在初始页面加载时,您应该隐藏所有列,然后根据选择框的值显示或隐藏类。 检查此代码
$('.choice').hide();
if($('#sel').val() == 'one'){
$('.one').show()
}else{
$('.two').show()
}