Question

我正在尝试根据HTML中的下拉选项来更改单元格颜色，我可以使用javascript，如果这是唯一的方法，但我觉得我只是在CSS中缺少一些简单的东西

带表/下拉列表的HTML块：

<table class="tg">
<tbody>
<tr>
<td class="select">
<select> 
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select> </td>
<td class="select2">
<select> 
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select> </td>
</tr>
</tbody>
</table>

CSS：

.select option value{font-family:Arial, sans-serif;font-size:14px;}
.select option value .1{background-color:blue}
.select option value .2{background-color:red}
.select option value .3{background-color:yellow}
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}

以上对我来说无论以何种方式，形状或形式都不起作用，我可以将颜色直接放入每个值中，背景颜色为“蓝色”等，但它只会改变下拉颜色，不是细胞，在选择后不会保持颜色。

Answer 1

你只能用JS做到这一点，无法用CSS动态改变颜色。

以下是一个例子：

＆＃13;

$('select').change(function(){
  var v = $(this).find(':selected').data('color');
  $(this).parent().css('background-color',v);
})

＆＃13;

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
option[value="1"] {
  background-color: blue;
}
option[value="2"] {
  background-color: red;
}
option[value="3"] {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tg">
  <tbody>
    <tr>
      <td class="select">
        <select> 
<option value="1" data-color="blue">Option 1</option>
<option value="2" data-color="red">Option 2</option>
<option value="3" data-color="orange">Option 3</option>
</select> </td>
      <td class="select2">
        <select> 
<option value="1" data-color="blue">Option 1</option>
<option value="2" data-color="red">Option 2</option>
<option value="3" data-color="orange">Option 3</option>
</select> </td>
    </tr>
  </tbody>
</table>

＆＃13;

根据下拉选择为单元格指定颜色

1 个答案: