What is the process for showing a table based on a selected value?

Question

What is the process for showing a table based on a selected value?

I could use some help - I am working on a <select> element with 4 different options in the form of <option>. What I want to achieve is to have tables that are initially not visible, and then when an option is clicked, the corresponding table will be displayed. How can I accomplish this?

<select name="exercise">
  <option value="16">Exercise 2016</option>// Display table if this option is clicked
  <option value="17">Exercise 2017</option>// Show different table on click
  <option value="18">Exercise 2018</option>// ***
  <option value="19">Exercise 2019</option>// ***
</select>

javascript html css

Answer 1

Answer №1

Did you consider using JQuery in your project? If not, you can implement it like this: HTML: HTML CONTENT CSS:

.table-list{
    display:none;
}

JS:

var select = document.getElementById("toggle");
toggle.addEventListener('change',function(){
    var tbs = document.getElementsByClassName('table-list');
for(var i=0;i<4;i++){
    tbs[i].style.display = 'none';
}
var tbName = select.value;
document.getElementById('tbName').style.display = 'block';
});

You can see the live demo here

Answer 2

Did you consider using JQuery in your project? If not, you can implement it like this: HTML: HTML CONTENT CSS:

.table-list{
    display:none;
}

JS:

var select = document.getElementById("toggle");
toggle.addEventListener('change',function(){
    var tbs = document.getElementsByClassName('table-list');
for(var i=0;i<4;i++){
    tbs[i].style.display = 'none';
}
var tbName = select.value;
document.getElementById('tbName').style.display = 'block';
});

You can see the live demo here

Answer 3

Answer №2

If you want to change the visibility of a table based on the selected option, you can retrieve the index of the selected option and incorporate it into your custom function to make the table visible.

For example: Let's say you have four tables with similar names except for their endings. You can include the index of the selected option in the table name to determine which one should be made visible. By utilizing the namespace of the table along with the selected option's index, you can easily locate the specific table and adjust its visibility accordingly.

I trust this explanation will be beneficial to you :)

Answer 4

If you want to change the visibility of a table based on the selected option, you can retrieve the index of the selected option and incorporate it into your custom function to make the table visible.

For example: Let's say you have four tables with similar names except for their endings. You can include the index of the selected option in the table name to determine which one should be made visible. By utilizing the namespace of the table along with the selected option's index, you can easily locate the specific table and adjust its visibility accordingly.

I trust this explanation will be beneficial to you :)

Answer 5

Answer №3

If you want to dynamically display different tables based on the value of a select box, it's actually quite simple. Here is an example:

Use the following CSS:

.tablecontainer li { display: none; }
.tablecontainer li.show { display: block; }

Here is the HTML structure:

<select name="selectbox">
  <option value="" checked>Select</option> 
  <option value="firsttable">Table 1</option> 
  <option value="sectable">Table 2</option>  
</select>

<ul class="tablecontainer">
 <li id="firsttable">
  <table>
   <tr>
    <td>First table</td>
   </tr>
  </table>
 </li>
<li id="firsttable">
  <table>
   <tr>
    <td>First table</td>
   </tr>
  </table>
 </li>
</ul>

And finally, use this JQuery script:

$('select').on("change", function(event) {
 event.preventDefault();
 $(".tablecontainer")
  .find("#" + $(this).val())
  .addClass("show")
  .siblings()
  .removeClass("show");
});

I hope this explanation and example will be helpful for you.

Answer 6

If you want to dynamically display different tables based on the value of a select box, it's actually quite simple. Here is an example:

Use the following CSS:

.tablecontainer li { display: none; }
.tablecontainer li.show { display: block; }

Here is the HTML structure:

<select name="selectbox">
  <option value="" checked>Select</option> 
  <option value="firsttable">Table 1</option> 
  <option value="sectable">Table 2</option>  
</select>

<ul class="tablecontainer">
 <li id="firsttable">
  <table>
   <tr>
    <td>First table</td>
   </tr>
  </table>
 </li>
<li id="firsttable">
  <table>
   <tr>
    <td>First table</td>
   </tr>
  </table>
 </li>
</ul>

And finally, use this JQuery script:

$('select').on("change", function(event) {
 event.preventDefault();
 $(".tablecontainer")
  .find("#" + $(this).val())
  .addClass("show")
  .siblings()
  .removeClass("show");
});

I hope this explanation and example will be helpful for you.

What is the process for showing a table based on a selected value?

Answer №1

Answer №2

Answer №3

Similar questions

The ion-item is refusing to be centered on the page

Unknown provider in Angular when using factory inside anonymous function wrapper

Tips for maintaining the integrity of blank space within a text node?

Inconsistency found in Ajax DataTable data updates

Activation of states in response to item clicks

"Enjoying a table header that scrolls freely with autoscroll feature

Tips for adjusting font size automatically to fit within its parent container every time

How can I include line breaks using HTML `<br>` tags in a textarea field that is filled with data from a MySQL

Flexbox allows you to easily manage the layout of your website

What is the best way to remove bootstrap when transitioning to a new microfrontend?

Using jQuery to target nested HTML elements is a great way to efficiently manipulate

I developed a digital Magic 8 Ball program, but unfortunately, it's only providing me with one response

"Need help solving the issue of generating a random number for a Firebase DB column after adding a new user

Tips on separating/callback functions based on earlier variables

Error in GLSL file: "Module parsing error: Unexpected symbol"

Feeling anxious about the abundance of fields within the table

The array.slice() method fails to work properly when I try to start it from any index other than 0

Toggle the hamburger menu using JavaScript

Issue with horizontal scrolling functionality in DataTables

Divide Angular ngFor into separate divs