TechQA.

Swap table via select box option

125 views Asked by At

Looking to swap multiple tables with a Javascript function, each one I try breaks horribly. I'd like the first table to show on page load, and then the rest to load as a different option is selected.

Any help would be greatly appreciated!

Here's the basic code:

<select id="tableSwapper">
    <option value="table1">Table 1</option>
    <option value="table2">Table 2</option>
</select>

<table id="table1" class="table table-bordered box" >
    <thead>
        <tr>
            <th>Points</th>
            <th>ARS</th>
            <th>ASV</th>
            <th>BUR</th>
            <th>CHE</th>
            <th>CRY</th>
            <th>EVE</th>
            <th>HUL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>02</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>  
        </tr>
        <tr>
            <td>03</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>04</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>05</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
    </tbody>
</table>
</div>

<table id="table2" class="table table-bordered box" >
    <thead>
        <tr>
            <th>TEAM</th>
            <th>ARS</th>
            <th>ASV</th>
            <th>BUR</th>
            <th>CHE</th>
            <th>CRY</th>
            <th>EVE</th>
            <th>HUL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>02</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>   
        </tr>
        <tr>
            <td>03</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td> 
        </tr>
        <tr>
            <td>04</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>05</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>  
        </tr>
    </tbody>
</table>

Here's the link to the basic setup:

http://jsfiddle.net/xrjaar6g/

javascript jquery twitter-bootstrap html-table swap
Original Q&A
5

There are 5 answers

0
AudioBubble On BEST ANSWER

Try jQuery show() and hide():

$(function() {
  $('#tableSwapper').on('change', function() {
    $('table[id^=table]').hide();
    $('#' + $(this).val()).show();
  });
});
thead {
  background-color: black;
  color: white;
}
table,
th,
tr,
td {
  text-align: center;
}
table {
  margin-top: 10px;
}
#table2 {
  display: none; /* hide the second table on page load */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="tableSwapper">
  <option value="table1">Table 1</option>
  <option value="table2">Table 2</option>
</select>


<table id="table1" class="table table-bordered box">
  <thead>
    <tr>
      <th>Points</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>

  </tbody>
</table>
</div>


<table id="table2" class="table table-bordered box">
  <thead>
    <tr>
      <th>TEAM</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>

  </tbody>
</table>

2
stanze On

Selecting on option2 showing second table, Try this Demo

$('#tableSwapper').change(function() {
    var optionValue = $(this).val();
    if(optionValue == "table1") {
        $('#table1').show();
    }
    else{
        $('#table1').hide();
    }
    if(optionValue == "table2") {
        $('#table2').show();
    }
    else{
        $('#table2').hide();
    }   
})
0
Prachit On

Not sure if I understood it correctly, but this will help.

$(document).ready(function() {

  $('#tableSwapper').change(function() {
    $('.table').hide();
    $('#' + $(this).val()).show();
  });

});
thead {
  background-color: black;
  color: white;
}
table,
th,
tr,
td {
  text-align: center;
}
table {
  margin-top: 10px;
}
#table2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tableSwapper">
  <option value="table1">Table 1</option>
  <option value="table2">Table 2</option>
</select>


<table id="table1" class="table table-bordered box">
  <thead>
    <tr>
      <th>Points</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>


    </tr>

  </tbody>
</table>
</div>


<table id="table2" class="table table-bordered box">
  <thead>
    <tr>
      <th>TEAM</th>
      <th>ARS</th>
      <th>ASV</th>
      <th>BUR</th>
      <th>CHE</th>
      <th>CRY</th>
      <th>EVE</th>
      <th>HUL</th>

    </tr>
  </thead>
  <tbody>


    <tr>
      <td>01</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>02</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>03</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>04</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>
    <tr>
      <td>05</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>

    </tr>

  </tbody>
</table>

0
omikes On

just add this jquery

$('#table2').hide();
$('select').change(function(){
    $('table').hide();
    $('#' + $(this).val()).show();
});
0
Darren S On

You can use jQuery's .toggle() to toggle the visibility of the tables.

Something like this; http://jsfiddle.net/apn1eLam/

$( document ).ready(function() {
    $('#table2').toggle();
});

$('#tableSwapper').on('change', function() {
  //alert( this.value );
  $('#'+this.value).toggle();
});

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in HTML-TABLE

Related Questions in SWAP

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions