javascript - jquery hide columns in table based on dropdown select - Stack Overflow

admin管理员组

文章数量:1401307

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.

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

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();
    });
 });

This is the 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>

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.)

Any ideas?

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.

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

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();
    });
 });

This is the 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>

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.)

Any ideas?

• javascript
• jquery
• html

Share Improve this question Follow edited May 24, 2015 at 21:48 Bashar 10933 silver badges1313 bronze badges asked May 24, 2015 at 20:20 prokaryoteprokaryote 43766 silver badges1616 bronze badges 1

• You could use a classname to pick what you want and just hide them. ex. $('.yourClass').css('display','none'); and to bring them back you could say $('.yourClass').css('display',''); – Emmanouil Chountasis Commented May 24, 2015 at 20:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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

The code bees much cleaner this way:

http://jsbin./megicegupa/1/edit?html,js,output

$('#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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

According to your code while loading the page we can see both column names "Choice One" and "Choice Two". So it's better to hide the column name on page load.

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

/*Add below code for showing column name accordingly to select box change 
 */

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

本文标签： javascriptjquery hide columns in table based on dropdown selectStack Overflow