jquery根据下拉选择隐藏表中的列 [英] jquery hide columns in table based on dropdown select

问题描述

我有一个6列的表。它有一个下拉菜单，以便观众可以选择四个最右列中的一个（这四个列的th是choiceA，choiceB，choiceC，choiceD）。我只希望显示所选列;其他三个未选择的列将被隐藏。最左边的两列始终可见。

I have a 6-column table. It has a dropdown menu so that viewers can select one of the four right-most columns (the "th"'s for those four columns are choiceA, choiceB, choiceC, choiceD). I want only the selected column to display; the other three non-selected columns would be hidden. The two left-most columns would always be visible.

即，查看者总共只能看到三列（当然还有下拉列表）。如果她从下拉菜单中选择，例如选择A，lbs，则想法是显示整个选项A列并隐藏所有其他列。

i.e., The viewer would see only three columns in total (plus the dropdown of course). If she chooses, e.g., "Choice A, lbs" from the dropdown, the idea is to show the whole choiceA column and hide all the others.

我认为这样会是一个简单的父/子问题，但事实证明这一点很简单。我试图将下拉选项映射到列标题中以供选择

I thought this would be a simple parent/child issue, but it has proved anything but simple. I have tried to map the dropdown options to the column heads for the choices

这是我的 jquery 代码（熊）记住，我是初学者）：

This is my jquery Code (bear in mind, I'm a beginner):

 $(document).ready(function () {
    $('#ddselect').change(function () {
       var id = $(this).children(':selected').attr('id');
       $('#' + id + '-sel').show().siblings('th.substance').hide();
       $('.' + id + '-substance').show().not($('.' + id + '-substance')).hide();
    });
 });

这是HTML：

<table>
<tr>
    <th scope="col" align="left"></th>
    <th scope="col"></th>
    <th colspan="4" scope="col">
        <select id='ddselect'>
            <option class='ddselect' id="ChoiceA">ChoiceA, lbs</option>
            <option class='ddselect' id="ChoiceB">ChoiceB, oz</option>
            <option class='ddselect' id="ChoiceC">ChoiceC, oz</option>
            <option class='ddselect' id="ChoiceD">ChoiceD, oz</option>
        </select>
</tr>
<tr>
    <th scope="col" align="left">Module</th>
    <th scope="col" align="left">Units</th>
    <th class='substance' id='ChoiceA-sel' scope="col">ChoiceA</th>
    <th class='substance' id='ChoiceB-sel' scope="col">ChoiceB</th>
    <th class='substance' id='ChoiceC-sel' scope="col">ChoiceC</th>
    <th class='substance' id='ChoiceD-sel' scope="col">ChoiceD</th>
</tr>
<tr>
    <td>type1</th>
        <td>5,000</td>
        <td class='ChoiceA-substance'>0</td>
        <td class='ChoiceB-substance'>0</td>
        <td class='ChoiceC-substance'>0</td>
        <td class='ChoiceD-substance'>0</td>
</tr>
<tr>
    <td>type2</th>
        <td>545</td>
        <td class='ChoiceA-substance'>288</td>
        <td class='ChoiceB-substance'>8</td>
        <td class='ChoiceC-substance'>9</td>
        <td class='ChoiceD-substance'>0.2</td>
</tr>
<tr>
    <td>type3</th>
        <td>29</td>
        <td class='ChoiceA-substance'>15</td>
        <td class='ChoiceB-substance'>89</td>
        <td class='ChoiceC-substance'>43</td>
        <td class='ChoiceD-substance'>9.9</td>
</tr>
</tr>

我可以显示正确的列带下拉列表并隐藏其他内容，但无法隐藏与隐藏头​​部对应的td。 （我会发布一个堆栈片段，但该按钮没有出现在我的编辑器中。）

I can show the right column head with the dropdown and hide the others, but cannot hide the "td"s that correspond to the hidden heads. (I would post a stack snippet, but the button is not appearing in my editor.)

任何想法？

推荐答案

让我们把它分解成一个小例子。当您使用尚未完全掌握的概念时，最好不要使代码复杂化。

Let's break this down into a small sized example. It's better not to over complicate your code when you're working with concepts you don't fully grasp yet.

实现目标的好方法是使用common类和交叉类来挑选和选择正确的列。

A good way to achieve what you want is to use common classes, and cross classes to pick and choose the right columns.

代码变得更加清晰：

http://jsbin.com/megicegupa/1/edit?html,js，输出

$('#sel').on('change', function () {
  var val = $(this).val(),
      target = '.' + val;
  
  $('.choice').hide();
  $(target).show();
});

  <select id="sel">
    <option value="one">1</option>
    <option value="two">2</option>
  </select>
  
  <table>
    <tr>
      <th>Module</th>
      <th>Units</th>
      <th class="choice one">Choice One</th>
      <th class="choice two">Choice Two</th>
    </tr>
    
    <tr>
      <td>type1</td>
      <td>5000</td>
      <td class="choice one">100</td>
      <td class="choice two">200</td>
    </tr>
    
    <tr>
      <td>type2</td>
      <td>350</td>
      <td class="choice one">40</td>
      <td class="choice two">90</td>
    </tr>
  </table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

附注：你有一些< td> 标记后跟< / th> 标记。确保验证您的HTML是否有错误。

Side note: You have some <td> tags that are followed by </th> tags. Make sure to validate your HTML for errors.

这篇关于jquery根据下拉选择隐藏表中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！