CODEWITHSUNDEEP
jqueryajaxhtml-table
richey
richey

Reputation: 3958

Show/hide table columns based on select option (jQuery)

I would like to display a table, but only display specific columns based on the selection in a selection element.

<table>
<thead>
<td colspan="5">
<SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
        </SELECT>
</td> 
</thead>
<tbody>
    <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
    <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
    </tbody>
</table>

Javascript:

$(document).on('change', 'table thead select', function() {
    var selected = $(this).is(":selected");

    var index = $(this).parent().index();
        $('table tbody tr').each(function() {
            if(selected) {
                $(this).find("td").eq(index).show();   
            } else {
                $(this).find("td").eq(index).hide();   
            }
        });
});

The code works for one time. After having changed the selection for the first time, however, the table columns don't update anymore... Here's a fiddle of the code above: https://jsfiddle.net/jsrookey/z8pj7dns/

Upvotes: 0

Views: 1616

Answers (3)

bgraham
bgraham

Reputation: 1997

You need to change this line of code:

 var index = $(this).parent().index();

That index is currently always 0. I think that's why it works the first time is because it can only hide 0 once. Your actually getting the parent of the select! Change it to this:

 var index = $(this).find("option:selected").index();

Upvotes: 1

j08691
j08691

Reputation: 207900

You don't need both of your variables, one for the index is sufficient.

$(document).on('change', 'table thead select', function() {
  var index = $(this).find("option:selected").index();
  $('table tbody td').show();
  $('table tbody tr').each(function() {
    $(this).find("td:eq(" + index + ")").hide();
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <td colspan="5">
      <SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
      </SELECT>
    </td>
  </thead>
  <tbody>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

guradio
guradio

Reputation: 15555

  1. No to get selected
  2. Get the index of selected option
  3. Show all td on select then hide the index of selected option

$(document).on('change', 'table thead select', function() {

  var index = $('option:selected',this).index();
  
  console.log(index)
  $('table tbody tr').each(function() {
      $(this).find("td").show();
       $(this).find("td:nth-child("+index+")").hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <td colspan="5">
      <SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
        </SELECT>
    </td>
  </thead>
  <tbody>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions