CODEWITHSUNDEEP
javascriptjqueryhtml
prokaryote
prokaryote

Reputation: 437

jquery hide columns in table based on dropdown select

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?

Upvotes: 2

Views: 7308

Answers (2)

free_soul
free_soul

Reputation: 74

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

Upvotes: 3

Oka
Oka

Reputation: 26355

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.

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

The code becomes much cleaner this way:

http://jsbin.com/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.com/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.

Upvotes: 3

Related Questions