Question

<!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>

我有一个HTML表，在HTML表单元格中填充了一个下拉列表。

下拉列表具有三个选项（红色，琥珀色和绿色）。

我希望HTML单元格的背景颜色根据下拉列表值进行更改。

例如。如果下拉列表值为Green，则HTML表格单元格背景色将为绿色。

使用JavaScript或CSS如何实现？

非常感谢！

Answer 1

这是您要寻找的吗？

document.querySelector('select').onchange=changeEventHandler;

var indicator = document.getElementById("color-indicator");

function changeEventHandler(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>Made Ready</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

  <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>Made Ready</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
      <select id="mySelect" onchange="abc()">
      <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 abc(){
        document.getElementById("myTable").style.backgroundColor = document.getElementById("mySelect").value
    }
  </script>
  </body>
  </html>

演示https://jsfiddle.net/95wvnh0x/7/

Answer 3

将“ id”分配给您和目标，然后使用类似这样的方法：

<questions>
  <question>
    <text>Some text</text>
    <questionType></questionType>
    <questionSubType>ABC</questionSubType>
    <options>
      <option subType="001">
        <text>Y</text>
        <mappedCodes>
          <code>1</code>
        </mappedCodes>
      </option>
      <option subType="001">
        <text>N</text>
        <mappedCodes>
          <code>2</code>
        </mappedCodes>
      </option>
    </options>
  </question>
  <question>
    <text>Some last text</text>
    <questionType></questionType>
    <questionSubType>ABC</questionSubType>
    <options>
      <option subType="001">
        <text>T</text>
        <mappedCodes>
          <code>2</code>
        </mappedCodes>
      </option>
    </options>
  </question>
 </questions>

Answer 4

With only three lines: 




    <!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>

根据下拉列表值更改HTML表格单元格的背景颜色？

4 个答案: