Question

我想根据下拉列表中选择的颜色值更改td背景颜色。

HTML：

<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
  <select >
    <option value="0">Select</option>
    <option value="1">Green</option>
    <option value="2">Red</option>
    <option value="3">Amber</option>
  </select>
</td>
</tr>
</table>

jquery：

$(document).ready(function(){
  $('td.tdcolor').change( function() {
     $(this).css('background-color','green');
 });
});

上面的jquery没有突出显示td元素持有tdcolor类的背景颜色。

如果有人可以帮助我如何使用jquery来改变它，那就太棒了。

非常感谢提前。

Answer 1

您应该使用pseudo-class选择器从下拉列表中获取selected文字。

var text = $(this).find(':selected').text();

$(document).ready(function(){
  $('td.tdcolor').change( function() {
     $(this).css('background-color',$(this).find(':selected').text());
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
  <select >
    <option value="0">Select</option>
    <option value="1">Green</option>
    <option value="2">Red</option>
    <option value="3">Blue</option>
  </select>
</td>
</tr>
</table>

Answer 2

＆＃13;

$(document).ready(function() {
  $('#color').change(function() {//add an id to html and use as selector
    $(this).parent("td").css('background-color', $('option:selected', this).text());//use the text of selected option as parameter
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>Channel</th>
    <th>Health</th>
  </tr>
  <tr>
    <td>Mobile</td>
    <td class="tdcolor">
      <select id='color'>
    <option value="0">Select</option>
    <option value="1">Green</option>
    <option value="2">Red</option>
    <option value="3">Amber</option>
  </select>
    </td>
  </tr>
</table>

＆＃13;

Answer 3

var funcs = [];
var i = 0;
while (i < 10) {
  funcs[i] = (function(index) {
    return function() {
      var obj = { '@': 'fd', 'index': index};
      return getcontent(obj); //( <--- getcontent is async function/problem)
    };
  }(i));
  i++;
}

function getcontent(obj) {
  console.log("My value: " + obj.index);
};

funcs.forEach(function (item) { item(); });

应该是.tdcolor而不是ddcolor

活动应该在$(document).ready(function(){ $('select').change( function() { $(".tdcolor").css('background-color','green'); }); });

根据选项值更改td背景颜色

3 个答案: