Adjust the color of an HTML table cell based on the selected value in a drop-down menu?

Question

Adjust the color of an HTML table cell based on the selected value in a drop-down menu?

<!DOCTYPE html>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.MRG{ background-color:#82E0AA; }
.MRA{ background-color:#F5B041; }
.MRR{ background-color:#EC7063; }
</style>
</header>
<body>
<table class="table table-hover table-condensed" border="1px">
  <thead>
    <tr>
  <td>Made Ready</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
  <select>
<option class="MRR">Red</option>
<option class="MRA">Amber</option>
<option class="MRG">Green</option>
  </select>
  </td>
    </tr>
  </tbody>
</table>
</body>
</html>

When I have a situation where an HTML table contains a drop-down list in one of its cells, I might want the cell's background color to change based on the selected value from the drop-down list.

The drop-down list consists of three options: Red, Amber, and Green.

To implement this functionality, I am exploring possibilities using JavaScript or CSS to dynamically change the table cell's background color according to the selected option.

For instance, selecting Green from the drop-down list should result in the HTML table cell changing its background color to green.

If you have any insights or suggestions on how to achieve this effect using JavaScript or CSS, I would greatly appreciate it!

javascript html css

Answer 1

Answer №1

Does this meet your requirements?

document.querySelector('select').onchange=updateColorIndicator;

var indicator = document.getElementById("color-indicator");

function updateColorIndicator(event) {
    indicator.classList = this.value;
}

.MRG{ background-color:#82E0AA; }
.MRA{ background-color:#F5B041; }
.MRR{ background-color:#EC7063; }

<table class="table table-hover table-condensed" border="1px">
  <thead>
    <tr>
      <td>Status</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="color-indicator">
        <select>
          <option value="MRR">Red</option>
          <option value="MRA">Amber</option>
          <option value="MRG">Green</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Does this meet your requirements?

document.querySelector('select').onchange=updateColorIndicator;

var indicator = document.getElementById("color-indicator");

function updateColorIndicator(event) {
    indicator.classList = this.value;
}

.MRG{ background-color:#82E0AA; }
.MRA{ background-color:#F5B041; }
.MRR{ background-color:#EC7063; }

<table class="table table-hover table-condensed" border="1px">
  <thead>
    <tr>
      <td>Status</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="color-indicator">
        <select>
          <option value="MRR">Red</option>
          <option value="MRA">Amber</option>
          <option value="MRG">Green</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

  <html>
  <header>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  </header>
  <body>
  <table  id="myTable" class="table table-hover table-condensed" border="1px">
    <thead>
      <tr>
      <td>Completion Status</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
      <select id="mySelect" onchange="changeColor()">
      <option value="red" class="MRR">Red</option>
      <option value="yellow"   class="MRA">Yellow</option>
      <option  value="green"  class="MRG">Green</option>
      </select>
      </td>
      </tr>
    </tbody>
  </table>
  <script>
    function changeColor(){
        document.getElementById("myTable").style.backgroundColor = document.getElementById("mySelect").value
    }
  </script>
  </body>
  </html>

Demo https://jsfiddle.net/95wvnh0x/7/

Answer 4

  <html>
  <header>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  </header>
  <body>
  <table  id="myTable" class="table table-hover table-condensed" border="1px">
    <thead>
      <tr>
      <td>Completion Status</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
      <select id="mySelect" onchange="changeColor()">
      <option value="red" class="MRR">Red</option>
      <option value="yellow"   class="MRA">Yellow</option>
      <option  value="green"  class="MRG">Green</option>
      </select>
      </td>
      </tr>
    </tbody>
  </table>
  <script>
    function changeColor(){
        document.getElementById("myTable").style.backgroundColor = document.getElementById("mySelect").value
    }
  </script>
  </body>
  </html>

Demo https://jsfiddle.net/95wvnh0x/7/

Answer 5

Answer №3

To properly identify and manipulate your elements, make sure to give them unique IDs. Then you can implement a solution similar to the following:

<select id="dropdownMenu">...</select>
<td id="tableCell">...</td>
<script>
    document.getElementById('dropdownMenu').addEventListener('change', function (event) {
        document.getElementById('tableCell').className = event.target.value;
    });
</script>

Answer 6

To properly identify and manipulate your elements, make sure to give them unique IDs. Then you can implement a solution similar to the following:

<select id="dropdownMenu">...</select>
<td id="tableCell">...</td>
<script>
    document.getElementById('dropdownMenu').addEventListener('change', function (event) {
        document.getElementById('tableCell').className = event.target.value;
    });
</script>

Answer 7

Answer №4

Using just three simple lines of code:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>
<!DOCTYPE html>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.MRG{ background-color:#82E0AA; }
.MRA{ background-color:#F5B041; }
.MRR{ background-color:#EC7063; }
</style>
</header>
<body>
<table class="table table-hover table-condensed" border="1px">
<thead>
<tr>
<td>Made Ready</td>
</tr>
</thead>
<tbody>
<!-- Add class name for tr -->
<tr class="changeColor">
<td>
<!-- Add id for select -->
<select id="colorChanger">
<option class="MRR">Red</option>
<option class="MRA">Amber</option>
<option class="MRG">Green</option>
</select>
</td>
</tr>
</tbody>
</table>

<!-- Add this script -->
<script>
$('#colorChanger').on('change', function() {
$('.changeColor').addClass($('#colorChanger :selected').attr('class'));
});
</script>

</body>
</html>

Answer 8

Using just three simple lines of code:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>
<!DOCTYPE html>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.MRG{ background-color:#82E0AA; }
.MRA{ background-color:#F5B041; }
.MRR{ background-color:#EC7063; }
</style>
</header>
<body>
<table class="table table-hover table-condensed" border="1px">
<thead>
<tr>
<td>Made Ready</td>
</tr>
</thead>
<tbody>
<!-- Add class name for tr -->
<tr class="changeColor">
<td>
<!-- Add id for select -->
<select id="colorChanger">
<option class="MRR">Red</option>
<option class="MRA">Amber</option>
<option class="MRG">Green</option>
</select>
</td>
</tr>
</tbody>
</table>

<!-- Add this script -->
<script>
$('#colorChanger').on('change', function() {
$('.changeColor').addClass($('#colorChanger :selected').attr('class'));
});
</script>

</body>
</html>

Adjust the color of an HTML table cell based on the selected value in a drop-down menu?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Having trouble with CSS3 radio buttons not functioning properly on Firefox?

"How can I adjust the height of a Bootstrap column to match the height of its neighboring column

"Enhancing user experience in ASP.NET by updating an updatepanel manually to provide feedback during the

Encountering the "Invalid JSON primitive" issue when making an AJAX request in MVC

Exploring and accessing information with ajax and php

Tips for resolving image path issues in slider functionality

The response body from the HTTP request is consistently empty or undefined

Fill the image with width using Mat

Steps to prevent the browser's back button from functioning

Creating intricate filters using React's map functionality

Responsive CSS images with overlays

Utilizing JavaScript to Parse Datasnap Output

Saving HTML form data to a text file

transferring data between pages with ajax

The Stylebook in Delphi 10 Seattle does not apply correctly on forms other than the Main form

"Encountering an issue with logging in the Node.js application on Heroku. Error

Initialize an array containing five zero elements

What is the best way to eliminate an iframe from inside itself using javascript?

Is there a way to display the destination of a hyperlink as the link text without duplicating it in the HTML/CSS source code?